ant design日期控件使用_仅月份

总体效果：

展开后：

选值后：

代码部分：

import { DatePicker } from 'antd';

export default class PersonInfo extends  Component{
    constructor() {
super();
//设置状态，存储日期
this.state = {
    workMode: ['month', 'month'],
    workValue: [],
        };
    }
    render(){
        //主体引用
const {RangePicker} = DatePicker;
return(
            <RangePicker
            placeholder={['开始日期', '结束日期']}
            format="YYYY-MM"
            value={this.state.workValue}
            mode={this.state.workMode}
            onPanelChange={this.workHandlePanelChange}

              onChange={this.workOnChange}

           />

//日期面板时间值改变事件
workHandlePanelChange = (value, mode) => {
this.setState({
workValue:value,
workMode: [
mode[0] === 'date' ? 'month' : mode[0],
mode[1] === 'date' ? 'month' : mode[1],
],
});
}
//日期清空时触发
workOnChange = () => {
this.setState({
workMode: ['month', 'month'],
workValue: [],
})
}

//其中this.state.workValue的两个值都是毫秒，formatDate为自写的转换函数
let workYearBegin = this.formatDate(this.state.workValue[0]);
let workYearEnd = this.formatDate(this.state.workValue[1]);

formatDate = (time) => {
if(!time){
return '';
}
let date = new Date(time);//毫秒转换成日期
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2,'0');//月份不足两位数在前面补0
return year + '-' + month;//格式控制
}