關於antd 日期組件只選擇年份，設置mode=year無法獲取value的解決辦法

antd3.0后的某個版本后終於支持了只選擇年份的設置。當時2.x版本的時候還不支持只選擇年份，我們項目中有這個只選擇年份的需求，為了ui風格的一致，只好自己擼了一個。

如今真是普天同慶！😄😄

然而，事情並沒有這么簡單。

import React, { Component } from 'react';
import { DatePicker } from 'antd';

export default class extends Component {
  onChange = val => {
    console.log(val)
  } 
  
  render() {
    return (
        <div>
            <DatePicker mode="year" onChange={this.onChange}/>
        </div>
    );
  }  
}

當你按照這段代碼，打開界面你發現，nice！真的出現了只有年份的界面！❤️❤️

然后，下一秒你就該吐血了。因為你發現你點擊選擇任何一個按鈕都不會有反應，onChange事件不會觸發！你根本拿不到時間對象！

氣不氣？👹👹

百思不得其解，然后去翻看ant design的github issue。終於看到一條中肯的comment。

https://github.com/ant-design/ant-design/issues/10242#issuecomment-393055938

<DatePicker mode="year" onPanelChange={(v) => {console.log(v)}}/>

只需要把onChange換成onPanelChange就好了。大功告成！你可以愉快的獲取時間了。

然而，你還發現一個問題，時間雖然是獲取了，但是面板並沒有關閉。😠😠

繼續查找問題，發現需要open這個屬性控制面板的關閉，這個大概是antd團隊沒考慮到？🤔️🤔️

解決辦法如下：

import React, { Component } from 'react';
import { DatePicker } from 'antd';

export default class extends Component {
  state =  {
    isopen: false,
    time: null
  }
  
  render() {
    return (
        <div>
            <DatePicker value={this.state.time} open={this.state.isopen} mode="year" format="YYYY" onFocus={() => {this.setState({isopen: true})}} 
            onBlur={() => {this.setState({isopen: false})}} 
            onPanelChange={(v) => {
              console.log(v)
              this.setState({
                time: v,
                isopen: false
              })
              }}/>
        </div>
    );
  }  
}        

添加了open的控制才真的搞定了！🎉🎉🎉

2019-05-31追加內容>>>>>>

然而，快樂的時光總是短暫，很快，測試便提出問題。”好像你這個點擊選擇年份后面板會閃開閃關哦，不符合要求哈“

“😂，哦，那我再看看呢”

還真的有這個問題，但是我記得之前不會閃啊。

算了，繼續查找問題，發現一個方法onOpenChange，文檔描述：彈出日歷和關閉日歷的回調，function(status){}

於是通過這個方法，判斷當前的操作是要面板打開還是關閉，然后來控制面板的顯示關閉。

import React, { Component } from 'react';
import { DatePicker } from 'antd';

export default class extends Component {
  state =  {
    isopen: false,
    time: null
  }

  handlePanelChange = (value) => {    
    console.log(">>>>>", value)    
    this.setState({      
      time: value,      
      isopen: false    
    })  
  } 
 
  handleOpenChange = (status) => {    
    // console.log(status)    
    if(status){      
        this.setState({isopen: true})    
    } else {      
        this.setState({isopen: false})    
    }  
  }  

  clearValue = () => {    
    this.setState({      
        time: null    
    })  
  }
  
  render() {
    return (
        <div>
            <DatePicker               
                value={this.state.time}               
                open={this.state.isopen}               
                mode="year"               
                placeholder='請選擇年份'              
                format="YYYY"              
                onOpenChange={this.handleOpenChange}              
                onPanelChange={this.handlePanelChange}              
                onChange={this.clearValue}            
            />        
        </div>
    );
  }  
}

從代碼可以看到，handleOpenChange便可以控制面板的開關，並且不會閃了。

細心的你可能還發現我在onChange的時候綁定了一個clearValue函數。誒？這是為什么呢?

我們都知道，DatePicker有個屬性是allowClear，默認為true。表示，可以通過輸入框中的❎圖標清除輸入框中的值。

但是，現在點擊這個清除icon卻沒有任何反應，值並不會被清除掉。

難不難受？😂

然后，我突然想到，這個清除會不會觸發onChange事件呢？

很明顯，選擇值的時候不會觸發onChange事件，但是點擊清除icon時觸發了！

於是通過onChange事件我可以愉快的清除值了~~

完美解決問題 😝