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()
          );
        },
      };
    },
  },

这样就好了,我是金陵彭于晏,我们下期再见!!!

原文地址:https://www.cnblogs.com/lq2333/p/15061903.html