需求：默认打开为月份，打开后点击月份跳到日期选择后关闭弹窗！
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;
