需求分析:
需求要实现两个日期时间选择器,第一个是日期时间范围,禁用当前时间以前(不包括今天),第二个根据第一个的结束时间,禁用结束时间以前(包括结束时间)。
解决方案:
主要思路来源于 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
>
转载请注明原文地址: https://lol.8miu.com/read-6577.html