第一种方法:根据接口返回日期限制,只能选择开始日期到结束日期范围内的。
<el-date-picker
type="monthrange"
:disabled="!isEdit"
v-model="formData.effectPeriod"
@change="handleChangeEffectStart"
:picker-options="pickerOptions"
value-format="yyyy-MM"
style="width: 178px"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="至"
clearable
></el-date-picker>
data:{
pickerOptions: {
disabledDate: (time) => {
// 如果函数处理比较简单,可以直接在这里写逻辑方法
return this.dealDisabledDate(time)
}
}
}
方法// this.formData.effectPeriod 在data里面取不到报错,可以写到方法里面。
深度copy 处理数据;
//this.newObject = JSON.parse(JSON.stringify(data.effectPeriod));
dealDisabledDate(time){
return (
time.getTime() + 8.64e7 < new Date(this.newObject[0]).getTime() ||
time.getTime() - 8.64e7 >= new Date(this.newObject[1]).getTime()
);
},
第二种:选择当前月份+1
<el-date-picker
v-model="formParam.yearMonth"
type="month"
placeholder="选择月"
value-format="yyyy-MM"
:picker-options="pickerOptions"
@change="handleChangeMonth">
</el-date-picker>
data:{
pickerOptions: {
disabledDate(time) {
let present = new Date(
new Date().getFullYear() + "-" + (new Date().getMonth())
).getTime();
let present_s = new Date(
new Date().getFullYear() + "-" + (new Date().getMonth()+1)
).getTime();
return time.getTime() >present_s ||time.getTime() <present
},
},
}
elemnet ui pickerOptions 获取限制月份日期选择;
于 2022-05-23 15:09:50 首次发布