Vue element 日期选择器 el-date-picker自定义可选范围

最新推荐文章于 2025-06-05 10:37:33 发布

转载最新推荐文章于 2025-06-05 10:37:33 发布 · 1.3k 阅读

vue 专栏收录该内容

92 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Element UI的日期选择器组件限制用户只能选择一周内的时间范围，通过监听选择事件并动态更新禁用日期实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：防止时间范围内的查询到数据过多，希望设置最大可选一周的是时间范围
完成效果：见下图

å¨è¿éæå¥å¾çæè¿°
查看官方文档，disabledDate中，time.getTime() 的范围既是禁用的时间范围
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
}

知道了怎么禁用时间，想要达到预期的效果，要拿到第一次选择的日期
查看element文档，onPick可返回每次选中的时间
disabledDate(time) {
let timeOptionRange = vue.timeOptionRange;
let secondNum = 60*60*24*7*1000;
if(timeOptionRange){
return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum ;
}
},
onPick(time){
//当第一时间选中才设置禁用
if(time.minDate && !time.maxDate){
vue.timeOptionRange = time.minDate;
}
if(time.maxDate){
vue.timeOptionRange = null;
}
}

此处有个知识点，在 onPick 和 disabledDate 直接用 this 拿到的是 el-date-picker 实例
查了下资料，如下可获取组件的 vue 实例
data(){
var vue = this;
return {}
}