element-ui限制date-picker时间选择组件选择时间

436 阅读1分钟

想要实现一个只能选取过去七天内时间的功能。

因为是使用的element加vue2所以使用date-picker来实现。

<el-date-picker
  v-model="data"
  type="daterange"
  range-separator="至"
  start-placeholder="开始时间"
  end-placeholder="结束时间"
  format="yyyy 年 MM 月 dd 日"
  :picker-options="pickerDisabled"
  value-format="yyyy-MM-dd"
>
  >
</el-date-picker>
data() {
    return {
      pickerDisabled: {
        disabledDate: (value) => {  //禁用
          //大于当天不能选择
          if (value.getTime() > Date.now()) {
            return true;
          }
          let sdate = new Date();
          let day = 7;  //天数
          sdate.setTime(sdate.getTime() - 3600 * 1000 * 24 * day);
          if (value.getTime() < sdate.getTime()) {
            return true;
          }
          return false;
        },
      },
    };
  },


注意!pickerDisabled写在data内而不是写在methods:{}里边。