Element-UI + vue限制日期的选择到时分秒

需求：限制时间的选择，只能选择当前时候以后的时间。

使用element-ui的el-date-picker组件

<template>
<el-date-picker
   v-model="expireDate"
   type="datetime"
   @blur="handle"
   format="yyyy-MM-dd HH:mm"
   value-format="yyyy-MM-dd HH:mm"
   :picker-options="pickerOptions"
   placeholder="选择日期"
/>
</template>

在data中限制时间的选择

<script>
data(){
    return {
        pickerOptions: {
            selectableRange: "",
            disabledDate(time) {
              var date = new Date();
              date.setFullYear(date.getFullYear() + 2);
              date.setDate(date.getDate() - 1);
              return (
                time.getTime() < Date.now() - 8.64e7 ||
                time.getTime() > date.getTime()
              );
            },
       },

    }
}
</script>

在watch中动态的限制时分秒的选择

watch: {
    // 判断选择是不是当天，如果不是当天时分秒就不限制
    expireDate(val) {
      let changeTime = "";
      if (val != null) {
        changeTime = val.split(" ")[0];
      }
      // 判断是否是当天
      if (Moment(new Date()).format("YYYY-MM-DD") === changeTime) {
        console.log("当天");
        this.expireDate = Moment(new Date()).format("YYYY-MM-DD HH:mm");
        this.selectableRangeHandler(1);
      } else {
        this.selectableRangeHandler(0);
      }
    },
}

methods : {
    // 限制时间选择函数
    selectableRangeHandler(flag) {
      if (flag == 0) {
        this.timeVal = "00:00:00";
      } else {
        let data = new Date();
        let hour = data.getHours();
        let minute = data.getMinutes();
        let second = data.getSeconds();
        this.timeVal = `${hour}:${minute}:${second}`;
      }

      this.$set(
        this.pickerOptions,
        "selectableRange",
        `${this.timeVal} - 23:59:59`
      );
    },
}