elementUI中日期时间插件(DateTimePicke) 限制结束时间大于指定的开始时间并且结束时间小于当前时间
程序员文章站
2024-03-24 09:20:04
...
有小伙伴问以下问题,为了方便说明特作此文以解惑
效果如下
选择指定时间以后的时间为结束时间
相关实现代码为
HTML
<div class="block">
<span class="demonstration">开始时间:</span>
<el-date-picker
v-model="startTime"
type="datetime"
:picker-options="startTimeRule"
placeholder="选择日期时间">
</el-date-picker>
</div>
<br/>
<div class="block">
<span class="demonstration">结束时间:</span>
<el-date-picker
v-model="endTime"
type="datetime"
:picker-options="endTimeRule"
placeholder="选择日期时间">
</el-date-picker>
</div>
JS
data() {
return {
startTime: new Date(2020, 00, 17, 23, 55),
endTime: '',
/* start */
startTimeRule: {
disabledDate: time => {
if (this.endTime) {
return (
time.getTime() > new Date(this.endTime).getTime()
);
} else {
return time.getTime() > Date.now();
}
}
},
endTimeRule: {
disabledDate: time => {
if (this.startTime) {
return (
time.getTime() > Date.now() ||
time.getTime() < new Date(this.startTime).getTime()
);
} else {
return time.getTime() > Date.now();
}
}
},
/* end*/
};
}
上一篇: JS实现图片的放大和缩小