没有使用selectableRange 禁用时分秒,是因为他会禁止每天的时分秒。 我们需要解决的是当开始时间、结束时间是同一天时, 开始时间不能超过结束时间。 如果直接清空,用户体验不好。所以用watch监听赋值,当前操作谁,它不满足条件,就改变它本身。
javascript
<el-col :span="8">
<el-form-item label="开始时间" prop="startDate" :rules="globalRules.requiredBlurOrChange">
<el-date-picker
v-model="formNew.startDate"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="{...editStartOptions}"
placeholder="选择日期"
@change="changeDate"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="完成时间" prop="endDate" :rules="globalRules.requiredBlurOrChange">
<el-date-picker
v-model="formNew.endDate"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="{...editStopOptions}"
placeholder="选择日期"
@change="changeDate"
>
</el-date-picker>
</el-form-item>
</el-col>
data() {
return {
editStartOptions: {
disabledDate: time => {
if (!this.formNew.endDate) {
return time.getTime() < new Date(1970 - 1 - 1).getTime(); //禁止选择1970年以前的日期
} else {
return time.getTime() > new Date(this.formNew.endDate);
}
},
},
editStopOptions: {
disabledDate: time => {
//开始时间可以和结束时间相同增加
let startDate= new Date(this.formNew.startDate);
startDate.setDate(startDate.getDate() - 1);
return (
time.getTime() < startDate || time.getTime() < new Date(1970 - 1 - 1).getTime() //禁止选择1970年以前的日期
);
},
},
}
}
watch: {
'formNew.startDate': {
handler(newVal) {
if (newVal && this.formNew.endDate && new Date(newVal).getTime() > new Date(this.formNew.endDate).getTime()) {
this.formNew.startDate = this.formNew.endDate
console.log(newVal, 'newVal')
}
}
},
'formNew.endDate': {
handler(newVal) {
if (newVal && this.formNew.startDate && new Date(newVal).getTime() < new Date(this.formNew.startDate).getTime()) {
// this.formNew.startDate = newVal;
this.formNew.endDate = this.formNew.startDate
}
}
},
},