el-date-picker 日期选择限制
场景: 选择时间的区间是31天,默认显示最近一周的数据
代码:
<el-date-picker v-model="due_date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
:picker-options="endDatePicker" value-format="yyyy-MM-dd" @change="dateChangeFun"
:default-value="personForm.due_date" :clearable="false">
</el-date-picker>
重点代码 限制只能选择31天
endDatePicker: {
onPick: ({ maxDate, minDate }) => {
if (minDate && this.pickerMinDate) {
this.pickerMinDate = null;
} else if (minDate) {
this.pickerMinDate = minDate.getTime();
}
},
disabledDate: (time) => {
if (this.pickerMinDate) {
const day1 = 30 * 24 * 3600 * 1000;
let maxTime = this.pickerMinDate + day1;
let minTime = this.pickerMinDate - day1;
return (
time.getTime() > maxTime ||
time.getTime() < minTime ||
time.getTime() > Date.now()
);
} else {
return time.getTime() > Date.now();
}
},
},
获取最近7天的日期
timeFun() {
let year = dayjs().year();
let month = dayjs().month() + 1;
let day = dayjs().date() - 8;
let lastDay = dayjs().date() - 1;
let nowYear = year + "-" + month + "-" + lastDay;
let lastYear = year + "-" + month + "-" + day;
let a = dayjs(lastYear).format("YYYY-MM-DD");
let arr = [];
arr.push(a, nowYear);
this.$set(this.personForm, "due_date", arr);
},