Ant Design中DatePicker设置mode="year"无法获取value

你的名字 2021-09-23 14:18 527阅读 0赞

## 问题描述 ##

使用上边代码，界面呈现出只有年份的选择器。但是，不管你怎么点击按钮选择年份都不会起作用， onChange 事件根本不会触发，所以value获取不了！

## 解决办法 ##

查看文档：  
1、onOpenChange 方法，是这样描述的：弹出日历和关闭日历的回调， 可以通过 onOpenChange 方法判断当前的操作是要面板关闭还是打开，来控制面板的显隐。  
2、onPanelChange方法，是这样描述的：日历面板切换的回调，可以通过这个方法获取value值  
3、onChange方法，可以通过onChange方法控制点击清除图标时清除数据

### 1、不使用form ###

import React, {Component} from 'react';
    import {DatePicker} from 'antd';
    
    export default class extends Component {
      state = {
        datePickerOpen: false,
        datePickerData: null
      }
    
      render() {
        const {datePickerOpen, datePickerData} = this.state
        return (
          <div>
            <DatePicker
              value={datePickerData}
              open={datePickerOpen}
              mode="year"
              placeholder="请选择年份"
              format="YYYY"
              onOpenChange={(status) => {
                if (status) {
                  this.setState({datePickerOpen: true})
                } else {
                  this.setState({datePickerOpen: false})
                }
              }}
              onPanelChange={(v) => {
                console.log(v)
                this.setState({
                  datePickerData: v,
                  datePickerOpen: false
                })
              }}
              onChange={() => {
                this.setState({datePickerData: null})
              }}
            />
          </div>
        )
      }
    }

### 2、使用form ###

import React, {Component} from 'react';
    import {DatePicker, Form} from 'antd';
    
    const FormItem = Form.Item;
    export default class extends Component {
      state = {
        datePickerOpen: false,
        datePickerData: null
      }
    
      //日期组件显示控制
      datePickerOpenChange = status => {
        if (status) {
          console.log(status)
          this.setState({datePickerOpen: true})
        } else {
          this.setState({datePickerOpen: false})
        }
      }
      //选择年后触发
      dataPickerPanelChange = v => {
        console.log(v)
        this.props.form.setFieldsValue({datePickerData: v})
        this.setState({
          datePickerOpen: false
        })
      }
      //点击清除按钮触发
      dataPickerChange = () => {
        this.props.form.setFieldsValue({datePickerData: null})
      }
    
      render() {
        const {datePickerOpen, datePickerData} = this.state
        const {getFieldDecorator} = this.props.form;
        return (
          <div>
            <Form
              layout="horizontal"
              style={
       {paddingBottom: 18}}
            >
              <FormItem>
                {getFieldDecorator("datePickerData", {
                  initialValue: datePickerData,
                  rules: [{required: true, message: '请选择真题年份'}]
                })(
                  <DatePicker
                    open={datePickerOpen}
                    mode="year"
                    placeholder="请选择年份"
                    format="YYYY"
                    onOpenChange={(status) => this.datePickerOpenChange(status)}
                    onPanelChange={(v) => this.dataPickerPanelChange(v)}
                    onChange={() => this.dataPickerChange}
                  />
                )}
              </FormItem>
            </Form>
          </div>
        )
      }
    }

### 结果处理 ###

选完年之后得到的值是这样的  
![选完年之后得到的值][20191227101320755.png]  
所以，可以通过`format`获取到年数据：

datePickerData.format('YYYY')

将年转为日期

import moment from 'moment';
    
    datePickerData = moment(2017, 'YYYY')

[20191227101320755.png]: /images/20210923/897c1fd799d84d68a38f534890a58167.png