vue element + DatePicker日期限制功能

记录下自定义日期选择器，需求开始时间不超过当前日期并且不大于结束时间，结束时间不小于开始时间。

存在两个日期选择器

• 主要使用disabledDate来限制禁用状态

<div class="cards">
      <div class="header">账户明细</div>
      <div class="content">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="form.beginTime"
              type="date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
              :picker-options="{ disabledDate: startDateFilter }"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="form.endTime"
              type="date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="{ disabledDate: endDateFilter }"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </div>

export default {
  data() {
    return {
      form: {
        beginTime: '',
        endTime: '',
      },
    };
  },
  methods: {
    // 结束时间不能大于当前时间
    startDateFilter(time) {
      const { endTime } = this.form;
      const getTime = time.getTime();
      if (endTime) {
        return getTime > new Date(endTime).getTime();
      }
      return getTime > Date.now() - 8.64e6;
    },
    // 结束时间不能小于开始时间且不能大于当前时间
    endDateFilter(time) {
      const { beginTime } = this.form;
      const getTime = time.getTime();
      const curTime = Date.now();
      if (beginTime) {
        return (
          getTime < new Date(beginTime).getTime() - 8.64e6 ||
          getTime > curTime - 8.64e6
        );
      }
      return getTime > curTime - 8.64e6;
    },
  },
};

拓展

8.64e6 = 8.64×10的6次方 = 8640000

// 接受参数将其转化为“毫秒”值
new Date(date) 

// 设置选择今天以及今天以前的日期
return  time.getTime() > Date.now() - 8.64e6;

// 设置选择今天以及今天之后的日期
return time.getTime() < Date.now() - 8.64e7;

// 设置选择今天之前的日期 不能选择当天
return time.getTime() > Date.now();

// 设置选择今天之后的日期 不能选择当天
return time.getTime() < Date.now();