element-ui,DateTimePicker 日期时间选择器，结束时间不超过开始时间，多级时间关系。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

element-ui,DateTimePicker 日期时间选择器，结束时间不超过开始时间

提示：以下是本篇文章正文内容，下面案例可供参考

一、项目需求

需求描述：报名时间的结束时间不能早于开始时间，培训时间的开始时间不能早于报名结束时间，测评时间不能早于培训结束时间。
简单一句话：报名结束之后开始培训，而培训结束之后才开始测评。

二、使用步骤

1.利用picker-options属性

:picker-options=“handlePickerOptions(‘trainingEndTime’)”
代码如下（示例）：

      <el-form-item label="报名时间" prop="enroll">
        <el-col :span="12">
          <el-date-picker
            v-model="ruleForm.enrollStartTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            :picker-options="handlePickerOptions('enrollStartTime')"
            style="width: calc(100% - 5px); margin-right: 5px"
          ></el-date-picker>
        </el-col>
        <el-col :span="12">
          <el-date-picker
            v-model="ruleForm.enrollEndTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            :picker-options="handlePickerOptions('enrollEndTime')"
            style="width: calc(100% - 5px); margin-left: 5px"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="培训时间" prop="training">
        <el-col :span="12">
          <el-date-picker
            v-model="ruleForm.trainingStartTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            :picker-options="handlePickerOptions('trainingStartTime')"
            style="width: calc(100% - 5px); margin-right: 5px"
          ></el-date-picker>
        </el-col>
        <el-col :span="12">
          <el-date-picker
            v-model="ruleForm.trainingEndTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            :picker-options="handlePickerOptions('trainingEndTime')"
            style="width: calc(100% - 5px); margin-left: 5px"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="测评时间" prop="checkTime">
        <el-date-picker
          v-model="ruleForm.checkTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始时间"
          :picker-options="handlePickerOptions('checkTime')"
          style="width: calc(100% - 5px); margin-right: 5px"
        ></el-date-picker>

2.绑定handlePickerOptions()，传入对应的区别类型

代码如下（示例）：

  handlePickerOptions(prop) {
      const that = this
      return {
        disabledDate(time) {
          if (!that.ruleForm) {
            return true
          }
          const { enrollStartTime, enrollEndTime, trainingStartTime, trainingEndTime, checkTime } = that.ruleForm
          let _end_time = ''
          let _start_time = ''
          switch (prop) {
            case 'enrollStartTime':
              _end_time = enrollEndTime || trainingStartTime || trainingEndTime || checkTime
              break
            case 'enrollEndTime':
              _end_time = trainingStartTime || trainingEndTime || checkTime
              _start_time = enrollStartTime
              break
            case 'trainingStartTime':
              _end_time = trainingEndTime || checkTime
              _start_time = enrollEndTime || enrollStartTime
              break
            case 'trainingEndTime':
              _end_time = checkTime
              _start_time = trainingStartTime || enrollEndTime || enrollStartTime
              break
            case 'checkTime':
              _start_time = trainingEndTime || trainingStartTime || enrollStartTime || enrollEndTime
              break
            default:
              break
          }
          const isEnd = _end_time ? (time.getTime() >= new Date(_end_time)) : false
          const isStart = _start_time ? (time.getTime() <= new Date(_start_time)) : false
          return isStart || isEnd
        }
      }
    },

可简单理解为：此处_end_time可以理解为不晚于：某某时间。_start_time理解为：不早于：某某时间。
例如最后一个测评时间：

  case 'checkTime':
              _start_time = trainingEndTime || trainingStartTime || enrollStartTime || enrollEndTime
              break

测评时间不早于上面所有时间，所以值为所有时间。

另外:附 普通使用开始时间和结束时间简化的代码

//开始时间（时间日期其他属性同上）
  :picker-options="handlePickerOptions('cooperationStartTime')"

//结束时间
  :picker-options="handlePickerOptions('cooperationEndTime')"

    handlePickerOptions(prop) {
      const that = this
      return {
        disabledDate(time) {
          if (!that.ruleForm) {
            return true
          }
          const { cooperationStartTime, cooperationEndTime } = that.ruleForm
          let _end_time = ''
          let _start_time = ''
          switch (prop) {
            case 'cooperationStartTime':
              _end_time = cooperationEndTime
              break
            case 'cooperationEndTime':
              _start_time = cooperationStartTime
              break
            default:
              break
          }
          const isEnd = _end_time ? (time.getTime() >= new Date(_end_time)) : false
          const isStart = _start_time ? (time.getTime() <= new Date(_start_time)) : false
          return isStart || isEnd
        }
      }
    }

总结

提示：其他需求可根据第一例自行修改满足。