<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