element 时间日期选择器限制选择范围为7天

1、template部分

  <el-date-picker
                v-model="time"
                style="width:350px"
                :type="dateType"
                size="small"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                :value-format="dateFormat"
                :picker-options="pickerOptions"
              />

2、data配置项

data (){
 return {
      time: [],
      dateType: 'datetimerange',
      dateFormat: 'yyyy-MM-dd HH:mm:ss',
      choiceDate: null,

      //重点

      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = ''
        },
        disabledDate: time => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 7 * 24 * 3600 * 1000
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - one
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + one
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              // 限制不能选择今天及以后
              time.getTime() > Date.now()
            )
          } else {
            // 如果没有选择日期，就要限制不能选择今天及以后
            return time.getTime() > Date.now()
          }
        }
      }
  }
}

（完）