需求：默认打开为月份，打开后点击月份跳到日期选择后关闭弹窗！

import React from 'react';
import { DatePicker } from 'antd'
import { PanelMode } from 'rc-picker/lib/interface';
import { Moment } from 'moment';

interface Props {}
interface initState {
  openState: boolean | undefined,
  modeState: PanelMode | undefined
}

class IndexPage extends React.Component<Props, initState> {
  constructor(props:Props){
    super(props);
    this.state  = {
      openState: false,
      modeState: 'month'
    };
    this.onPanelChange = this.onPanelChange.bind(this);
    this.onChange = this.onChange.bind(this);
  }

   onPanelChange = (date: Moment, dateString: string) => {
    switch (dateString) {
      case 'date':
        this.setState({
          modeState: 'date',
        })
        break;
      case 'month':
        this.setState({
          modeState: 'month',
        })
        break;
      case 'year':
        this.setState({
          modeState: 'year',
        })
        break;
      default:
        break;
    }
  }

  onChange = () => {
    this.setState({
      modeState: 'date',
      openState: false
    })
  }

  render () {
    const { modeState, openState } = this.state;
    return (
      <div>
        <DatePicker
          mode={modeState}
          onFocus={() => {
            this.setState({
              openState: true
            })
          }}
          onBlur={()=>{
            this.setState({
              openState: false
            })
          }}
          onPanelChange={this.onPanelChange}
          onChange={this.onChange}
          open={openState}
        />
      </div>
    )
  }
}

export default IndexPage;