Element UI disableddate设置动态时间,结束日期不可大于开始日期以及时间点

elementui中 开始日期 -- 结束日期 开始时间--结束时间校验：

个人不建议使用computed，性能不太好，触发过于频繁；

注意：时间间隔中，不可设置秒数，因为element中el-time-picker组件中就算限制了秒数用户还是可选，并没有禁用，大家可自行尝试下；

具体写法如下：

<!--开始日期-->
<el-form-item  label="开始日期"  prop="startDateStr">
  <el-date-picker
    v-model="startDateStr"
    :picker-options="pickerStartDate"
    type="date"
    format="yyyy-MM-dd"
    range-separator="-"
    value-format="yyyy-MM-dd"
    placeholder="开始日期">
  </el-date-picker>
</el-form-item>
​
<!--结束日期-->
<el-form-item label="结束日期" prop="endDateStr">
  <el-date-picker
    :picker-options="pickerEndDate"
    v-model="endDateStr"
    type="date"
    format="yyyy-MM-dd"
    range-separator="-"
    value-format="yyyy-MM-dd"
    placeholder="结束日期">
  </el-date-picker>
</el-form-item>
​
<!--开始时间-->
 <el-form-item  label="开始时间"  prop="startTime">
   <el-time-picker
    v-model="startTime"
    selectableRange:`00:00:00 - ${endTime ? endTime+':00' : '23:59:00'}`
    }"
    format="HH:mm"
    value-format="HH:mm"
    placeholder="开始时间">
  </el-time-picker>
</el-form-item>
​
<!--结束时间-->
 <el-form-item label="结束时间" prop="endTime">
  <el-time-picker
    format="HH:mm"
    value-format="HH:mm"
    v-model="endTime"
    placeholder="结束时间"
    :picker-options="{
    selectableRange:`${startTime ? startTime+':00' : '00:00:00'} - 23:59:00`
    }"
    >
  </el-time-picker>
</el-form-item>
​
data() {
  return {
    oneDayMsec: 1 * 24 * 3600 * 1000, //一天的毫秒数
    pickerStartDate: this.pickerStartDate(), 
    pickerEndDate: this.pickerEndDate(),
  }
},
methods: {
    /**开始日期可选 当天之后(包含当天）且不可大于结束日期 **/
    pickerStartDate() {
      var _this = this;
      return {
        disabledDate(time) {
          var time1 = new Date(_this.endDateStr).getTime();// 开始日期时间戳
          let a = time.getTime() <= Date.now() - 8.64e7;
          return time1 ? (a || time.getTime() > time1) : a;
        }
      }
    },  
      /**结束日期必须大于等于开始日期 且限制从当天之后(包含当天）可选**/
      pickerEndDate() {
        var _this = this;
        return {
          disabledDate(time) {
            var time1 = new Date(_this.startDateStr).getTime();// 开始日期时间戳
            let a = time.getTime() <= Date.now() - 8.64e7;
            return time1 ? (a || time.getTime() <= time1 - _this.oneDayMsec) : a;
          }
        }
      },
  }
​
​
 /**
    pickerOptions1: {
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//当天之后的时间可选
            return time.getTime() > Date.now() - 8.64e7;//当天之前的时间可选
            return time.getTime() > Date.now() ;//当天之前的时间可选---不包括当天
          },
        }      
**/