element-ui 日期选择器,自定义禁用条件,先定义一个大时间范围,选的时候,再定义小范围 比如,限制当前时间 过去的一年内可选,如果选了一个时间后,只能选前后30天,且不能超过过去的一年内
<el-form-item label="统计日期" prop="time">
<el-date-picker
v-model="formParams.time"
class="c-date-picker"
type="daterange"
unlink-panels
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
data() {
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
// 如果选择了开始日期,则动态计算最大可选日期
if (minDate && !maxDate) {
this.pickerOptions.disabledDate = (date) => {
// 一月以后的时间
const oneMonthLater = new Date(minDate);
oneMonthLater.setDate(oneMonthLater.getDate() + 30); // 365天内
// 一月以前的时间
const oneMonthAgo = new Date(minDate);
oneMonthAgo.setDate(oneMonthAgo.getDate() - 30); // 365天内
// 小于当前时间 在一年前时间前
const oneYearAgo = new Date();
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
if (date > new Date() || oneYearAgo > date) {
return true;
}
return (
date < oneMonthAgo ||
date > oneMonthLater
);
};
} else {
// 还原时间限制
this.pickerOptions.disabledDate = this.pickerOptions.disabledDateCopy;
}
},
disabledDate(time) {
const now = new Date();
// now.setFullYear(now.getFullYear() + 1);
const oneYearAgo = new Date();
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
return (
time > now ||
time < oneYearAgo
);
},
disabledDefaultDate(time) {
const now = new Date();
const oneYearAgo = new Date();
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
return (
time > now ||
time < oneYearAgo
);
}
},
效果如图