需求分析:
需求要实现两个日期时间选择器,第一个是日期时间范围,禁用当前时间以前(不包括今天),第二个根据第一个的结束时间,禁用结束时间以前(包括结束时间)。
解决方案:
主要思路来源于 https://www.jianshu.com/p/af5fb9d657ce 这篇文章。 日期时间选择器的官方文档 https://element.eleme.io/#/zh-CN/component/datetime-picker 。
<template>
<el-date-picker
v-model="form.effectiveDateRange"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
:picker-options="pickerOptions"
/>
<el-date-picker
v-model="tagItem.recoveryTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
:picker-options="recoveryOptions"
/>
</template>
<script>
export default{
data(){
return{
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
recoveryOptions: {},
form:{
effectiveDateRange: [],
}
}
},
created() {
this.recoveryOptions = {
disabledDate: (time) => {
const endTime = this.form.effectiveDateRange[1];
return time.getTime() < new Date(endTime).getTime();
}
};
},
}
</script>