elementUI 日期時間選擇器 el-date-picker 選擇限制

用elementUI的el-date-picker開發時會遇到表單結束時間必須在開始時間之後，或者開始時間必須在結束時間之前。

實作方法如下：

關鍵是:picker-options屬性

<el-col :span="6" :offset="2">
  <el-form-item :label="$t('education.class.courseSchede.startTime')" prop="startDate">
     <el-date-picker
       v-model="form.startDate"
       style="width: 100%"
       type="date"
       :placeholder="$t('placeholder.select')"
       :picker-options="startDatePicker"
     />
   </el-form-item>
 </el-col>
 <el-col :span="6" :offset="2">
   <el-form-item :label="$t('education.class.courseSchede.endTime')" prop="endDate">
     <el-date-picker
       v-model="form.endDate"
       style="width: 100%"
       type="date"
       :placeholder="$t('placeholder.select')"
       :picker-options="endDatePicker"
     />
   </el-form-item>
 </el-col>
           

必要的變量聲明一下

data() {
  return {
    ...
    startDatePicker: this.startDate(),
    endDatePicker: this.endDate(),
    form: {
      startDate: '',
      endDate: '',
    }
  }
},
           

然後是method函數

startDate() {
  const ts = this
  return {
    disabledDate(time) {
      if (ts.form.endDate) { // 開始時間小于結束時間且今天之前的日期不可選擇
        return new Date(ts.form.endDate).getTime() < time.getTime() || time.getTime() < Date.now() - 8.64e7
      } else {
        return time.getTime() < Date.now() - 1000 * 3600 * 24 //結束時間不選時，開始時間不能選擇今天之前的日期
      }
    }
  }
},
endDate() {
  const ts = this
  return {
    disabledDate(time) {
      if (ts.form.startDate) { // 結束時間大于開始時間
        return new Date(ts.form.startDate).getTime() > time.getTime()
      } else {
        return time.getTime() < Date.now() - 1000 * 3600 * 24 // 開始時間不選時，結束時間不能選擇今天之前的日期
      }
    }
  }
}
           

要注意上面兩個函數return的是disabledDate，是以判斷時間區間時要用“||”，而不是“&&”。