ElementUI :picker-options 限制结束时间不能大于开始时间（亲测有效）

最新推荐文章于 2025-09-23 18:17:23 发布

原创最新推荐文章于 2025-09-23 18:17:23 发布 · 2w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#:picker-options

element-ui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ElementUI的el-date-picker组件，通过picker-options属性设置禁用日期，确保用户选择的延期日期不会早于原销售日期。代码示例展示了如何将全局变量EndTime作为比较基准，实现日期限制。

一：如图：延期的时间不能大于原销售日期

利用elementUi 的 el-date-picker标签属性：picker-options

二：代码如下

           <el-date-picker
            placeholder="选择日期"
            :picker-options="pickerOptions"
            type="date"
            style="width:80%"
            v-model.number="formDelay.date"></el-date-picker>

原销售日期定义为全局变量：this.delayItem.EndTime；

data(){
    return{
         pickerOptions: {
          disabledDate:time=>{
            let delay = this.delayItem.EndTime;
            if(delay){
              // const dd = new Date('2019-09-03').getTime();//9月3号
              // return time.getTime() < dd;
              return time.getTime() < new Date(delay).getTime();
            }
          },
        },
    }
}

注意：return里是13位时间戳进行的比较；