遇到一个需求,需要两个日期时间选择器,之间进行交互。
起始日期:当前系统日期之前的日期不能选择。
结束日期:大于起始时间,且结束之前的日期可选。
限制某一时段无法选择
引入DateTimePicker 日期时间选择器
<el-date-picker
v-model="start_time"
type="datetime"
placeholder="选择起始日期"
:picker-options="start_Date"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm"//精确到分
@change="dateChangebirthday1()"
>
</el-date-picker>
<el-date-picker
v-model="end_time"
type="datetime"
placeholder="选择结束日期"
:picker-options="end_Date"
format="yyyy-MM-dd HH:mm"
>
</el-date-picker>
下面是逻辑代码,因为只是对数据的控制,方法写在了data(){}中。
start_time: "",
end_time: "",
start_Date: {
disabledDate: (time) => {
if (
this.end_time == "" ||
this.end_time == null ||
this.end_time == undefined
) {
return time.getTime() < Date.now() - 8.64e7;
} else {
return (
time.getTime() > this.end_time ||
time.getTime() < Date.now() - 8.64e7
);
}
},
selectableRange: "03:30:00 - 23:59:00",
},
end_Date: {
disabledDate: (time) => {
if (
this.start_time == "" ||
this.start_time == null ||
this.start_time == undefined
) {
return time.getTime() < Date.now() - 8.64e7;
} else {
return time.getTime() < this.start_time;
}
},
selectableRange: "03:30:00 - 23:59:00",
},
效果图如下: