el-datapicker 选择期限不能跨月

1、主要是使用期限选择器的 这个方法Picker Options  

  文档介绍

onPick

选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效

Function({ maxDate, minDate })

 

2、代码实现

  定义一个变量记录 当前点击的起始日期 userChoiceStartDate，然后在disabledDate回调函数中限制用户可选择的时间为当月，选择完成后清空记录的起始日期

 

/**

* 日期范围限制

* 根据开始日期月份限制当月，不能跨月

*/

userChoicePickerOptions: {

onPick: ({ maxDate, minDate }) => {

this.userChoiceStartDate = minDate.getTime();

if (maxDate) {

this.userChoiceStartDate = '';

}

},

disabledDate: time => {

if (this.userChoiceStartDate) {

const startDay = (new Date(this.userChoiceStartDate).getDate() - 1) * 24 * 3600 * 1000;

const endDay = (new Date(new Date(this.userChoiceStartDate).getFullYear(), new Date(this.userChoiceStartDate).getMonth() + 1, 0).getDate() - new Date(this.refinedOilImportChoiceDate).getDate()) * 24 * 3600 * 1000;

const minTime = this.userChoiceStartDate - startDay;

const maxTime = this.userChoiceStartDate + endDay;

return time.getTime() < minTime || time.getTime() > maxTime;

}

}

},