vue2+ElementUI时间选择器限制可选范围为今天往前7天内的任意一天

题目有2个重点：1、可选范围为今天往前7天（含今天）2、只能选择7天内的任意一天

由此可知，用户选择的最大日期和最小日期为同一天，即只能选择一天，也就是说，使用了时间范围插件，但是model中的两个日期是同一天。

HTML：

 <el-date-picker
      class="datePicker"
      v-model="params.dates"
      type="daterange"
      range-separator="-"
      :start-placeholder="today"
      :end-placeholder="today"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      @change="changeParam_data"
      @focus="resetMinDate"
      v-show="routeName !== 'keySites' && routeName !== 'equipmentDetails'"
      :picker-options="pickerOptions"
    >
    </el-date-picker>

data中设置相应的值：

 data() {
    return {
     
      today:
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate(),
      pickerMinDate: "",
      pickerOptions: {
        disabledDate: (time) => {
          //一天的毫秒数：60*60*24*1000*1 = 8.64e6
          if (this.pickerMinDate !== "") {
            // let maxTime = new Date(this.pickerMinDate).getTime()+1000*60*60*24;
            let minTime = new Date(this.pickerMinDate).getTime();
            let chooseTime = new Date(time).getTime();
            return chooseTime > minTime || chooseTime < minTime;
          } else {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() <
                new Date(new Date().getTime() - 60 * 60 * 1000 * 24 * 7)
            );
          }
         
        },
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate;

        },
      },
      dateValue: "2022-01-01",
   }
  },

最后在method中设置相应的方法：(在第二次选择时清空时间值）

methods: {
  
    resetMinDate() {
      this.pickerMinDate = "";
    },
  },

 

如此，大功告成！