vue element的日期选择器 ，选择日期时间范围的限制

最近在做活动配置，那么就会需要配置活动的开始时间和活动的结束时间，对于活动开始时间选择范围是不能今天之前时间的，活动的结束时间也是，是不能选择今天之前的时间和活动开始之前时间的，有了明确的目的，现在就来解决它！

根据element官网提供的属性,来实现它

html部分

 <el-form-item
      label="活动时间"
      prop="startTime"
      :rules="[
        {
          required: true,
          message: '请选择活动开始日期',
          trigger: 'change',
        },
      ]"
    >
      <el-date-picker
        v-model="form.startTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择活动开始日期"
        clearable
        :picker-options="pickerOptionsStart"
      />
    </el-form-item>
    <el-form-item
      label=""
      label-width="8px"
      prop="endTime"
      :rules="[
        {
          required: true,
          message: '请选择活动结束日期',
          trigger: 'change',
        },
      ]"
    >
      <el-date-picker
        v-model="form.endTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择活动结束日期"
        clearable
        :picker-options="pickerOptionsEnd"
      />
    </el-form-item>

js部分

export default {
  data() {
    return {
      form: {
        startTime: "", // 开始时间
        endTime: "", // 结束时间
      },
      // 限制时间范围
      // 活动开始时间不能选择今天之前的时间 今天之前的时间设置禁止选择状态
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.form.endTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > this.form.endTime
            );
          }
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      // 活动结束时间不能选择活动开始的之前的时间
      //比如选择活动开始时间为4.16日，那么4.16日之前都要为禁止选择状态
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() < new Date(this.form.startTime).getTime()
          );
        },
      },
    };
  },
};

最终效果：