1需求
有两个时间控件,开始时间不能大于结束时间
<el-col :span="8">
<el-date-picker
v-model="queryParams.startDate"
size="small"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择开始时间"
:picker-options="pickerOptionsStart"
clearable
@change="handle('start')"
/>
</el-col>
<el-col :span="8" :offset="1">
<el-date-picker
v-model="queryParams.endDate"
size="small"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择结束时间"
:picker-options="pickerOptionsEnd"
clearable
@change="handle('end')"
/>
</el-col>
js
pickerOptionsStart: {
disabledDate: (time) => {
if (this.queryParams.endDate) {
return (
time.getTime() > new Date(this.queryParams.endDate).getTime()
);
}
},
},
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.queryParams.startDate) {
return (
//小于开始日期的都禁止,只能选大于等于开始日期的
time.getTime() < new Date(this.queryParams.startDate).getTime()
);
}
},
},
问题
假如开始时间选择2023-09-07 00:00:00,结束时间可以选择7号。
如果开始时间选择2023-09-07 00:00:01(7号但大于00:00:00的时间),结束时间不可以选择7号。
原因
控件会取每个日期的00:00:00作为判断条件。
所以2023-09-07 00:00:01(大于00:00:00)会作为2023-09-08 00:00:00处理。所以8号前的日期都被禁用。也就不能选择7号了。
而2023-09-07 00:00:00会作为2023-09-07 00:00:00处理.所以7号前的日期都被禁用(能选择7号)。
解决方法:
判断选择日期小于(开始日期-一天少一毫秒)(不能减一天,因为开始日期选择00:00:00时,结束日期就会多一天)
或者判断:判断选择日期小于等于(开始日期-一天)
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.queryParams.startDate) {
return (
//小于开始日期-一天(少1毫秒,也可以用8.64e6表示,一天的毫秒数是8.64e7)的都禁止,只能选大于等于开始日期的
time.getTime() < new Date(this.queryParams.startDate).getTime() - (24 * 3600 * 1000 - 1)
//time.getTime() < new Date(this.queryParams.startDate).getTime() - 8.64e6
//time.getTime() <= new Date(this.queryParams.startDate).getTime() - (24 * 3600 * 1000)
//time.getTime() <= new Date(this.queryParams.startDate).getTime() - 8.64e7
);
}
},
},
2问题
点击x,清空datatimepicker控件。发现日期选择不了。
解决方法:
用watch监听选择器的值,清空选择器值变为null,选择器识别不了,需要改为""
watch: {
queryParams.startDate: function () {
if (this.queryParams.startDate === null) {
this.queryParams.startDate = "";
}
},
},
所有博客均为自己学习的笔记。如有错误敬请理解。