Element el-date-picker组件限制选择日期/时间

条件

1. 限制时间选择时间不能小于当前时间，并且若选择的日期大于当前日期的话，要动态取消该验证，不做此判断
2. 开始和结束日期不能跨天
3. 结束时间不能大于开始时间

---

实现效果

---

上代码！！！

<el-form-item label="开始时间" prop="startTime">
  <el-date-picker v-model="form.startTime" :popper-class="'currentDatePickerClass'" format="yyyy-MM-dd HH:mm"
    value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择开始时间" :editable="false"
    :picker-options="pickerOptionsStart" @change="handleEndTime(false)" @blur="handleEndTime(false)" />
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
  <el-date-picker v-model="form.endTime" :popper-class="'currentDatePickerClass'" format="yyyy-MM-dd HH:mm"
    value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择结束时间" :editable="false"
    :disabled="form.startTime == null && form.endTime == null ?true:false" :picker-options="pickerOptionsEnd"
    @change="handleEndTime(true)" @blur="handleEndTime(true)" />
</el-form-item>

data()下：

// 设置开始日期
pickerOptionsStart: {
  disabledDate: time => {
    let endDateVal = this.form.endTime;
    if (endDateVal) {
      return (time.getTime() > new Date(endDateVal).getTime() || time.getTime() < new Date(endDateVal)
        .getTime() - 86400000);
    } else {
      return time.getTime() < Date.now() - 8.64e7;
    }
  },
  // 限制时间
  selectableRange: [new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds() +
    ' - 23:59:59'
  ],
},
// 设置结束日期
pickerOptionsEnd: {
  disabledDate: time => {
    let beginDateVal = this.form.startTime;
    if (beginDateVal) {
      return (time.getTime() < new Date(beginDateVal).getTime() - 86400000 || time.getTime() > new Date(
        beginDateVal).getTime());
    } else {
      return time.getTime() < Date.now() - 8.64e7;
    }
  },
  // 限制时间
  selectableRange: [new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds() +
    ' - 23:59:59'
  ],
},

// 监听开始、结束时间的变化
watch: {
  'form.startTime': {
    handler(newVal, oldVal) {
      if (newVal != null && newVal != undefined) {
        // 原来的数据一直为今天，和新时间比对
        oldVal = Date.now();
        let start = new Date(oldVal);
        let end = new Date(newVal);
        // 判断是否超过一天
        var dateDiff = end.getDate() - start.getDate();
        if (dateDiff >= 1) {
          this.pickerOptionsStart.selectableRange = '00:00:00 - 23:59:59';
        } else {
          this.pickerOptionsStart.selectableRange = new Date().getHours() + ':' + new Date().getMinutes() + ':' +
            new Date().getSeconds() +
            ' - 23:59:59'
        }
      }
    }
  },
  'form.endTime': {
    handler(newVal, oldVal) {
      if (newVal != null && newVal != undefined) {
        // 原来的数据一直为今天，和新时间比对
        oldVal = Date.now();
        let start = new Date(oldVal);
        let end = new Date(newVal);
        // 判断是否超过一天
        var dateDiff = end.getDate() - start.getDate();
        if (dateDiff >= 1) {
          if (this.form.startTime != null && this.form.startTime != undefined) {
            let startTime = new Date(this.form.startTime);
            this.pickerOptionsEnd.selectableRange = startTime.getHours() + ':' + startTime.getMinutes() + ':' +
              startTime.getSeconds() +
              ' - 23:59:59'
          }
        } else {
          this.pickerOptionsEnd.selectableRange = new Date().getHours() + ':' + new Date().getMinutes() + ':' +
            new Date().getSeconds() +
            ' - 23:59:59'
        }
      }
    }
  },
},

调用的函数：

// 判断结束时间
handleEndTime(obj) {
  if (this.form.startTime != null && this.form.endTime != null) {
    if (this.form.startTime >= this.form.endTime) {
      this.msgError("结束时间必须大于开始时间！");
      if (obj) {
        this.form.endTime = null;
      } else {
        this.form.startTime = null;
      }
    } else {
      let start = new Date(this.form.startTime);
      let end = new Date(this.form.endTime);
      var dateDiff = end.getDate() - start.getDate();
      if (dateDiff >= 1) {
        this.msgError("时间差不能大于一天！");
        if (obj) {
          this.form.endTime = null;
        } else {
          this.form.startTime = null;
        }
      }
    }
  }
},