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

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"
  />

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

一点一点进步！