el-date-picker组件时间不可选中未来时间

多看书少吃饭

已于 2023-07-18 10:05:28 修改

阅读量1.2k

点赞数 1

分类专栏： elementUi 文章标签： javascript 前端

于 2023-06-07 09:35:17 首次发布

本文链接：https://blog.csdn.net/weixin_56818823/article/details/131080833

版权

elementUi 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

需求：对el-date-picker组件的时间进行控制

实现：

 <el-date-picker
                
                  v-model="form.date"
                  size="mini"
                  type="date"
                  style="width: 140px"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :picker-options="setDisabled"
                >
                </el-date-picker>

通过picker-options属性来控制可选时间的范围

在data中定义seDisabled对象，通过disabledDate返回值来控制可选时间范围

比如：

 setDisabled: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 可选历史天、可选当前天、不可选未来天
          // return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选当前天、不可选未来天
          // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选当前天、可选未来天
          // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
        },
      },

不可选中未来天，当前时间为2022年06月07日，效果：