ant design 日期选择yyyy antd 年份选择器

** 日期选择器无法正常使用年的形式**

在工作中使用3.x版本的antd，碰到日期选择器无法正常使用年的形式，发现网上的资料不多，自己研究了写了一下，亲测有用哦！

第一步：将DatePicker做成受控组件即绑定state的某个变量(本文使用的是year)。

第二步：使用onPanelChange方法将DatePicker选中的值赋给year，达到刷新视图的效果。
PS：一开始我试了onChange，调试的时候才发现选择日期的时候并不会触发onChange方法，这一步骤是为了解决日期选择器年形式无法赋值的问题。

第三步：使用onOpenChange方法将open设置为true，使用onPanelChange方法将
open设置为true,这样就能选择日期时显示日期面板，选完之后关闭日期面板。
PS:open属性是控制日期面板的显隐，把值设上去之后你会发现日期面板关闭不了，所以open也应该设置为受控的，将open与state的某个变量绑定(本文使用的是open)，open的原始值设置为false，使用onOpenChange方法在弹出日历的时候显示日期面板即将open的值设置为true，在选中值后使用OnPanelChange方法隐藏日期面板即将open的值设置为false，这一步骤时是解决把日期选上去之后无法关闭日期面板的问题。

第四步：使用onBlur方法将open设置为false。
PS:你把日期选上了之后，虽然能关闭日期面板，但是如果打开了日期面板之后，你点击日期面板外的地方，日期面板也应该隐藏。

第五步：使用onChange清空日期选择器的值即将year的值清空。
PS:你把值设上去之后会发现，你点清除按钮没有效果，但是这个时候会触发onChange方法，可以利用这个方法清空日期选择器的值。

最后附上代码，希望帮到有需要的人。

//解决了把日期选上去的问题
  onPanelHandler = (value) =>{
    this.setState({
      year:value,
      open:false
    })
  }
  //解决了无法关闭日期面板的问题
  onOpenHandler = () => {
    this.setState({
      open:true
    })
  }
  //解决了失焦不能关闭日期面板的问题
  onBlurHandler = () => {
    this.setState({
      open:false
    })
  }
  //解决了点击清除按钮无法清除值的问题
  onChange = () => {
    this.setState({
      year:''
    })
  }

<DatePicker 
      mode="year" format={yearFormat} value={this.state.year}
      onChange={this.onChange}
      onBlur = {this.onBlurHandler}
      open = {this.state.open}
        onPanelChange = {this.onPanelHandler} 
        onOpenChange = {this.onOpenHandler}
      />