el-date-picker 时间条件限制

<el-date-picker :editable="datePickerSetting" :clearable="datePickerSetting" :picker-options="beginTimeOption" type="datetime" v-model="searchForm.beginTime" style="width: 210px"></el-date-picker>
<span class="line">---</span>
<el-date-picker :editable="datePickerSetting" :clearable="datePickerSetting" :picker-options="endTimeOption" type="datetime" v-model="searchForm.endTime" style="width: 210px"></el-date-picker>
复制代码

条件一:前后间隔3天

//获取AddDayCount天后的日期
getDateBefore(AddDayCount) { 
    var dd = new Date(); 
    dd.setDate(dd.getDate() - AddDayCount);//获取AddDayCount天后的日期 
    var y = dd.getFullYear(); 
    var m = dd.getMonth() < 10 ? '0' + dd.getMonth() : dd.getMonth();//获取当前月份的日期,不足10补0
    var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); //获取当前几号,不足10补0
    var hour = dd.getHours();
    var min = dd.getMinutes();
    var sec = dd.getSeconds();
    return {
        year: y,
        month: m,
        day: d,
        hour: hour,
        min: min,
        sec: sec
    };
},
//设置开始和结束日期或时间
beginTime: new Date(utils.getDateBefore(3).year, utils.getDateBefore(3).month, utils.getDateBefore(3).day, 0, 0, 0),
endTime: new Date(utils.getDateBefore(-1).year, utils.getDateBefore(-1).month, utils.getDateBefore(-1).day, 0, 0, 0),
复制代码

条件二:结束时间最小到开始时间,开始时间最大到结束时间

//初始化
beginTimeOption: {
    disabledDate(date) {
        return date.getTime() >= new Date(utils.getDateBefore(-1).year, utils.getDateBefore(-1).month, utils.getDateBefore(-1).day, 0, 0, 0);
    }
},
endTimeOption: {
    disabledDate(date) {
        return date.getTime() <= new Date(utils.getDateBefore(3).year, utils.getDateBefore(3).month, utils.getDateBefore(3).day, 0, 0, 0);
    }
},
//监听
watch: {
    ['searchForm.beginTime'](val) {
        this.endTimeOption = {
            disabledDate(date) {
                return date.getTime() <= new Date(val);
            }
        }
    },
    ['searchForm.endTime'](val) {
        this.beginTimeOption = {
            disabledDate(date) {
                return date.getTime() >= new Date(val);
            }
        }
    }
}
复制代码

转载于:https://juejin.im/post/5c3707a6e51d45527201790c