antD 时间年的写法

import React from 'react'
import { FormComponentProps } from 'antd/lib/form'
import { Form, Modal,  Row, Col, DatePicker, message, Select  } from 'antd'
import '../MonthReport/loadFileModal.less'
import moment from 'moment'
import HttpClient from '@utils/HttpClient'
const FormItem = Form.Item

const { Option } = Select
const { confirm } = Modal
export interface IProps extends FormComponentProps {
    form: any
    showModalCon: any
    setFn: any
   
}
interface IState {
    uploadMonth: any
    loading: boolean
    isopen: any,
    time: any,
    seasonNum: any
}
class LoadFileModal extends React.Component<IProps, IState> {
    constructor (props: IProps) {
        super(props)
        this.state = {
            loading: false,
            uploadMonth: '',
            isopen: false,
            time: null,
            seasonNum: 1
        }
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.showModalCon !== this.props.showModalCon) { // 每次打开先清空之前的内容
            this.props.form.resetFields()
            this.setState({      
                time: null    
            })  
        } 
    }
    handleOk = () => {
        this.props.form.validateFields((err) => {
            if (err) {
                return
            }
           this.setState({
             loading: true
           })
            const { time, seasonNum } = this.state
            const param = {
                season: seasonNum,
                year: moment(time).format('YYYY')
            }
            const newTime = moment(time).format('YYYY')
          
            HttpClient.get(`/reportApi/api/report/season/${newTime}-0${seasonNum}`, {}).then((res: any) => {
              //  console.log(res)
                if (res.code === 'CODE_0000') {
                 
                    if (res.data && res.data.length) {
                            if (res.data.find(ele => ele.isexamine === '1') !== undefined) {
                                message.warning('所选年月季报已定稿,不支持手动生成')
                                this.props.setFn()
                                this.setState({
                                    loading: false
                                  })
                            } else {
                                confirm({
                                    title: '所选年月已存在季报成果，继续生成则会覆盖季报成果',
                                    content: '',
                                    okText: '确定',
                                    okType: 'danger',
                                    cancelText: '取消',
                                    onOk: () => {
                                       
                                        this.seasonReport(param)
                                    }
                                })
                            }
                      
                       
                    } else {
                        // 不存在季报，新生成
                        this.seasonReport(param)
                    }
                }
            }) 
        })
        
        
      }
      // 生成季报
      seasonReport = (frameData) => {
        HttpClient.get(`/reportApi/api/report`, frameData).then((res: any) => {
         //  console.log(res)
            if (res.code === 'CODE_0000') {
                message.success('季报生成中,请1分钟后刷新页面')
                this.props.setFn()
                this.setState({
                    loading: false
                  })
            } else {
                message.error(res.msg)
                setTimeout(() => {
                    this.setState({
                        loading: false
                    })
                }, 2000)
            }
        })
      }
      handleCancel = () => {
        this.props.setFn()
      }
      // 禁止选择的日期
       disabledDate = (current) => {
        
        return current && current > moment().endOf('day')
      }
    
      // 选择日期
      changeDate = (value, dateString) => {
      
          const param =  { value, dateString } 
          this.setState({
            uploadMonth: param.dateString ? param.dateString : ''
          })
      }
      handlePanelChange = (value) => {   // 时间赋值   
        this.props.form.setFieldsValue({
            year: value
        })
        this.setState({
            isopen: false,
            time: value
        })
      } 
     
      handleOpenChange = (status) => {    // 时间
        // console.log(status)    
        if (status) {      
            this.setState({isopen: true})    
        } else {      
            this.setState({isopen: false})    
        }  
      }  
    
    //   clearValue = () => {    
    //     this.setState({      
    //         time: null    
    //     })  
    //   }
      // 选择季度
      selecSeasonType = (value) => {
       
        this.setState({
            seasonNum: value
        })
      }
    render() {
        const { getFieldDecorator } = this.props.form
        const { loading, time } = this.state
        console.log(time)
        const formItemLayout = {
            labelCol: {
                span: 4
            },
            wrapperCol: {
                span: 18,
                offset: 1
            }
        }
       
        return (
            <React.Fragment>
                <Modal
                    className='modalMessage'
                    title='生成季报'
                    closable={false}
                    maskClosable={false}
                    centered={true}
                    confirmLoading={loading}
                    visible={this.props.showModalCon}
                    onCancel={this.handleCancel}
                    onOk={this.handleOk}
                    >
                    <Form>
                        <Row gutter={24}>
                            <Col span={24}>
                                <FormItem
                                    {...formItemLayout}
                                    label='季报年'
                                >
                                    {getFieldDecorator('year', {
                                        initialValue: '',
                                        rules: [{
                                            required: true,
                                            message: '请选择季报年'
                                        }]
                                    })(            
                                        <DatePicker            // 时间年的写法                 
                                            open={this.state.isopen}               
                                            mode='year'   
                                            allowClear={false}           
                                            placeholder='请选择年份'              
                                            format='YYYY'              
                                            onOpenChange={this.handleOpenChange}              
                                            onPanelChange={this.handlePanelChange}              
                                           
                                                 
                                        />      
                                        //  <DatePicker mode='year'  allowClear={false} style={{ '60%'}} format='YYYY'  onChange={this.changeDate} disabledDate={this.disabledDate} placeholder='请选择季报年' />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={24}>
                                <FormItem
                                    {...formItemLayout}
                                    label='季度'
                                >
                                    {getFieldDecorator('season', {
                                       
                                        rules: [{
                                            required: true,
                                            message: '请选择季度'
                                        }]
                                    })(
                                        <Select onChange={this.selecSeasonType}  style={{ '60%'}} placeholder='请选择季度' >
                                            <Option value='1'>一季度</Option>
                                            <Option value='2'>二季度</Option>
                                            <Option value='3'>三季度</Option>
                                            <Option value='4'>四季度</Option>
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </React.Fragment>
        )
    }
}

export default Form.create<IProps>()(LoadFileModal)