主要通过添加 :picker-options来约束时间的
开始时间必须大于当前时间,结束时间必须大于开始时间来加判断
beginDate() {
const self = this;
return {
disabledDate(time) {
debugger;
if (self.endTime) {
//如果结束时间不为空,则小于结束时间
return new Date(self.endTime).getTime() < time.getTime();
} else {
// return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
}
},
};
},
processDate() {
const self = this;
return {
disabledDate(time) {
if (self.startTime) {
//如果开始时间不为空,则结束时间大于开始时间
return new Date(self.startTime).getTime() > time.getTime();
} else {
// return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
}
},
};
},
data
startDatePicker: this.beginDate(), endDatePicker: this.processDate(),
<div class="des-status-df">开始</div> <div class="block"> <el-date-picker :picker-options="startDatePicker" v-model="startTime" type="datetime" placeholder="选择日期时间" > </el-date-picker> </div> <div class="des-status-df">结束</div> <div class="block"> <el-date-picker :picker-options="endDatePicker" v-model="endTime" type="datetime" placeholder="选择日期时间" > </el-date-picker> </div>