The elementui time component sets the selection range (the disabled date is set by disabledDate)

The time format of the disabled method of pickerBeginDateBefore is xxxx-xx-xx. So the <el-date-picker> component should use formatthe format of the specified input box; use value-formatthe format of the specified binding value.

1. The start time of the contract - cannot exceed the time

<!--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;
              }
            }
          },
        },

2. The end time of the contract - cannot be greater than the start time

<!--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;
              }
            }
          }
        },

Guess you like

Origin blog.csdn.net/m0_65274248/article/details/126845472