vue+ el-date-picker 时间范围限制

<template>
  <div>
    <!-- 第一种 开始日期不大于结束日期，结束日期不小于开始日期-->
    <el-form :model="form">
      <el-form-item label="开始日期" prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          :picker-options="pickerStartOptions"
          placeholder="开始日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="endDate">
        <el-date-picker
          v-model="form.endDate"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          :picker-options="pickerEndOptions"
          placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <!-- 第二种 时间范围 拆分日期介于开始日期 结束日期之间-->

      <el-form-item label="拆分日期" prop="splitTime">
            <el-date-picker
              v-model="form.splitTime"
              placeholder="请选择拆分日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        startDate: "",
        endDate: "",
        splitTime:''
      },
      pickerStartOptions: {
        disabledDate: (time) => {
          var _this = this;
          if (_this.form.endDate) {
            return time.getTime() > new Date(_this.form.endDate).getTime();
          }
        },
      },
      pickerEndOptions: {
        disabledDate: (time) => {
          var _this = this;
          if (_this.form.startDate) {
            return time.getTime() < new Date(_this.form.startDate).getTime();
          }
        },
      },
      /******第二种 */
       pickerOptions: {
        disabledDate: (time) => {
          var _this = this
          return time.getTime() > new Date(_this.form.endDate).getTime() || time.getTime() < new Date(_this.form.startDate).getTime()
        },
      },
    };
  },
};
</script>