【ElementUI】时间选择器限制选择范围 disabledData

最新推荐文章于 2025-05-30 09:06:19 发布

小花花inhere

最新推荐文章于 2025-05-30 09:06:19 发布

阅读量2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： elementUI 文章标签： elementui 时间选择器 disabledDa 限制时间

本文链接：https://blog.youkuaiyun.com/IT429/article/details/76269248

elementUI 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用ElementUI的日期选择器组件通过设置disabledDate选项来确保截止时间不会小于开始时间。通过具体代码示例展示了单个选择框及daterange类型的选择限制。

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

关于结束时间不能大于开始时间的问题，在elementui里我们用官方提供的 disabledDate 选项来解决。
HTML：给选择器加上:picker-options属性

//开始时间
<el-date-picker v-model="startDate"></el-date-picker>
//截止时间
<el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>

DATA：
我这里就简略写下关键的。

data() {
    return {
        startDate: null,
        endDate: null,
        endDateOpt: {
            disabledData: (time) => {
                return time.getTime() < this.startDate;
            }
        }
    }
}

以上是单个选择框的，如果是daterange或datetimerange的话：

<el-date-picker v-model="value1" type="daterange" 
    :picker-options="pickerOptions">
</el-date-picker>

data() {
   return {
     value: '',
     pickerOptions2: {
         disabledDate: (time) => {
             return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&
         }
     }
   };
}