ant design 日期月份區間選擇

ant design(3.x) 月份區間的選擇

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

export default class extends Component {
constructor(props) {
    super(props);
    this.state = {
    monthRange: ''
    }
  }  
 handleChange = value => {
    this.setState({ monthRange: value });
  };
  handlePanelChange = (value, mode) => {
    console.log('value, mode: ', value, mode);
    this.setState({
      monthRange: value,
      mode: [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]],
    });
  };
  
  render() {
    return (
        <div>
            <DatePicker.RangePicker
                placeholder={['開始月份', '結束月份']}
                format="YYYY-MM"
                value={monthRange}
                onOpenChange={(status) => {
                  console.log('status: ', status);
                  if(!isOpen){
                    this.setState({isOpen: true})
                  }
                }}
                renderExtraFooter={() => <div style={{marginLeft: 250}}><Button size="small" type="primary" onClick={()=>this.setState({isOpen: false})}>確定</Button></div>}
                mode={['month', 'month']}
                open={isOpen}
                onChange={this.handleChange}
                onPanelChange={this.handlePanelChange}
              />
        </div>
    );
  }  
}

之前看到又說這樣寫的：

 onOpenChange={(status) => {
              if(status){
                this.setState({isopen: true})
              } else {
                this.setState({isopen: false})
              }
            }}

主要的幾個問題，及解決方式。

1. onChange方法無法觸發獲取到值，需要換成onPanelChang
2. 皮膚的顯示隱藏需要open屬性進行手動控制
3. onFocus、onBlur會導致閃開閃關，需要換成onOpenChange
4. 通過自定義按鈕去控制，選擇開始和結束月份，再關閉皮膚

這樣就是選擇一個開始的月份，或者結束的月份就會導致皮膚關閉。
後面想著只是通過方法來開啟皮膚，自定義按鈕來關閉皮膚，這樣可以清楚地看到我選擇完的開始月份和結束月份，然後在點選自定義按鈕來關閉，操作上會更好些。
官網上，也有對此說明，詳細可以看如下地址。

連結: ant design 官網.