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

由于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;
              }
            }
          }
        },

猜你喜欢

转载自blog.csdn.net/m0_65274248/article/details/126845472
今日推荐