element ui 日期時間選擇器DateTimePicker 禁用時間限制

項目中的需求

 

1. 過磅開始時間和過磅結束時間不能選擇，超過當前時間的日期
2. 過磅結束時間不能大於過磅開始時間
3. 過磅開始時間，最大值不能超過結束時間三個月

template

el-form-item(label="過磅開始時間", prop="rotaPlanBegin")
        el-date-picker(
          v-model="formInline.rotaPlanBegin",
          type="datetime",
          value-format="yyyy-MM-dd HH:mm:ss",
          placeholder="請選擇過磅開始時間",
          :picker-options="startTimePicker"
        )
      el-form-item(label="過磅結束時間", prop="rotaPlanEnd")
        el-date-picker(
          v-model="formInline.rotaPlanEnd",
          type="datetime",
          value-format="yyyy-MM-dd HH:mm:ss",
          placeholder="請選擇過磅結束時間",
          :picker-options="endTimePicker"
        ) 
           

computed

return 的條件用或 || 

computed: {
    startTimePicker() {
      var _this = this;
      return {
        disabledDate(time) {
          let endTime = new Date(_this.formInline.rotaPlanEnd);
          const start = new Date();
          //最大值三個月范圍限制
          start.setTime(endTime.getTime() - 3600 * 1000 * 24 * 90);
          return (
            time.getTime() > endTime ||
            time.getTime() < start ||
            time.getTime() > Date.now()
          );
        },
      };
    },
    endTimePicker() {
      var _this = this;
      return {
        disabledDate(time) {
          let licenseStart = new Date(_this.formInline.rotaPlanBegin);
          licenseStart.setDate(licenseStart.getDate());
          return (
            time.getTime() < licenseStart.getTime() ||
            time.getTime() > Date.now()
          );
        },
      };
    },
  },

這樣就好了，我是金陵彭於晏，我們下期再見！！！