el-date-picker的type为daterange时仅对开始日期做限制

前言绣球

需求是这样的，开始日期需要限制只能选择今天的日期，结束日期只能选择今天之后的日期。结束日期很常见，但是单纯限制开始日期，还是蛮少见的，尤其是daterange模式的开始日期和结束日期用的同一个日期弹窗。本来是用change去做的清除，但只能清除一次，还不知道为啥，我把代码贴上来，要是有知道的可以告诉我一下，我研究明白了也会再来记录一下

html代码

<el-date-pickerv-model="createtime"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions">

一、正确代码

// startTimeFlag = false 这个就正常定义在data中就行啦
pickerOptions: {onPick: ({ maxDate, minDate }) => {if (!maxDate && !minDate) {this.startTimeFlag = false;} else if (minDate) {this.startTimeFlag = true;if (!this.isToday(new Date(minDate))) {// 如果选择的开始时间不是今天,则不允许选择this.startTimeFlag = false;this.$msg({ type: 'warning', message: '开始时间只能选择当天日期！' });}}console.log(maxDate, minDate, this.startTimeFlag);},disabledDate: (time) => {if (!this.startTimeFlag) {return !this.isToday(time);}const yestoday = new Date();yestoday.setDate(yestoday.getDate() - 1);return time.getTime() < yestoday.getTime();},},
// 这个就是ai写的判断日期的方法,还蛮好用的。再一次感慨一句，任何工作都是想法最重要，创意最值钱呀
isToday(date) {const today = new Date();return (date.getFullYear() === today.getFullYear() &&date.getMonth() === today.getMonth() &&date.getDate() === today.getDate());},

二、错误代码

dateChange(value, info, form) {if (info.CODE === 'createTime' && !this.isToday(new Date(form.startTime))) {// 如果选择的开始时间不是今天，则清空时间this.$msg({ type: 'warning', message: '开始时间只能选择当天日期！' });form.startTime = '';form.endTime = '';// 这里写为null可以清除数据，写为‘’则不行，也有可能是封装问题导致form.createTime = null;}},