基于ant|基于ant design日期控件使用_仅月份的操作基于antdesign日期控件使用_仅月

总体效果：

文章图片

展开后：
【基于ant|基于ant design日期控件使用_仅月份的操作】
文章图片

选值后：

文章图片

代码部分：
1、引入：

import { DatePicker } from 'antd';

2、主体部分：

export default class PersonInfo extends Component{constructor() {super(); //设置状态，存储日期this.state = {workMode: ['month', 'month'], workValue: [], }; }render(){//主体引用 const {RangePicker} = DatePicker; return(

函数：

//日期面板时间值改变事件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'); //月份不足两位数在前面补0return year + '-' + month; //格式控制}

补充知识：eact使用ant时设置DatePicker日期控件中文显示
方式一：局部设置