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);},