elementUI 日期时间选择器 el-date-picker 选择约束

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，所以判断时间区间时要用“||”，而不是“&&”。