elementui 时间组件设置选择范围（禁用日期通过 disabledDate 设置）

最新推荐文章于 2024-03-07 18:29:35 发布

而耳迩儿

最新推荐文章于 2024-03-07 18:29:35 发布

阅读量1.4k

点赞数 1

分类专栏：功能文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/m0_65274248/article/details/126845472

版权

功能专栏收录该内容

3 篇文章 0 订阅

订阅专栏

由于pickerBeginDateBefore的disabled方法时间格式为xxxx-xx-xx。所以<el-date-picker>组件要通过使用format指定输入框的格式；使用value-format指定绑定值的格式。

一、合同开始时间——不能超过大于时间

<!--html部分-->
<el-date-picker type="date" placeholder="请选择合同开始日" v-model="form.startDate"
 :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>

//data部分  开始时间选择范围
pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.form.endDate) {
              let hm = new Date(this.form.endDate.substr(0, 10)).getTime() - new Date(this.form.endDate).getTime();
              let endDT = new Date(this.form.endDate).getTime() + hm;
              if (endDT) {
                return time.getTime() > endDT;
              }
            }
          },
        },

二、合同结束时间——不能大于开始时间

<!--html部分-->
<el-date-picker type="date" placeholder="请选择合同结束日" v-model="form.endDate" :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>

//data部分  结束时间选择范围
pickerBeginDateAfter: {
          disabledDate: time => {
            if (this.form.startDate) {
              let hm = new Date(this.form.startDate).getTime() - new Date(this.form.startDate.substr(0, 10)).getTime();
              let beginDT = new Date(this.form.startDate).getTime() - hm;
              if (beginDT) {
                return time.getTime() < beginDT;
              }
            }
          }
        },