本文共 1744 字，大约阅读时间需要 5 分钟。

虽然在antd的4X版本以后支持了年份和季度的时间选择器，但是项目中版本升级可能遇到很多不兼容的地方，而且没有时间去更改，所有需要对第版本的组建进行更改

import React, {    Component } from 'react';import {    DatePicker,Form, Button } from 'antd';const FormItem = Form.Itemclass DatePickers extends Component {     state =  {       isopen: false,    time: null  }  submit=()=>{       this.props.form.validateFields((err, values) => {           if (!err) {             console.log('点击提交', values.test);          let t = new Date(values.test)          console.log(t.getFullYear())        }      });  }  handlePanelChange = (value) => {           console.log(">>>>>", value)        this.setState({               time: value,            isopen: false        })     const {    setFieldsValue } = this.props.form    setFieldsValue({           test: value    })  }    handleOpenChange = (status) => {           // console.log(status)        if(status){                 this.setState({   isopen: true})        } else {                 this.setState({   isopen: false})        }    }    clearValue = (value) => {           this.setState({                 time: null        })      console.log(">>a>>>", value)     const {    setFieldsValue } = this.props.form    setFieldsValue({           test: value    })  }    render() {       //   const { getFieldProps, name } = this.props      const {    getFieldDecorator, getFieldProps, setFieldsValue  }  = this.props.form;    return (        // 
   
        
    
            
     
                      {                       getFieldDecorator('test', {                       })(                        
                              )                }                          
                   
     sub        
    
    );  }  }const Index = Form.create()(DatePickers)export default Index