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() ;//當天之前的時間可選---不包括當天
         },
       }      
**/