element时间控制组件根据第一次点击时间控制前后七天可选

1.需求: 选择随意一个时间点，只能确认选择前后七天的时间

<el-date-picker style="width:70%" type="datetimerange" v-model="formSearch.selectTimes"
           format="yyyy-MM-dd HH:mm" value-format="timestamp" 
           :star-placeholder="$t('record.startDay')"
           :end-placeholder="$t('record.endDay')" :range-separator="$t('common.to')"                 
           clearable
           :picker-options="pickerOptions" @change="changeDatePicker"                 
           @focus="focusPickData">
</el-date-picker>

我的做法是data中定义picker-option为空对象 通过method里面去改变picker-option里面的值

首先组件el-data-picker中 type为datetimerange  根据elementUi官方解释中

 onpick能获取你当前所选时间的最大值跟最小值

那么可以在方法中先取得最小值 也就是第一次点击的值去判断

          //定义一个最小值将他记录为today
          var today = null
          this.pickerOptions = {
            // 获取最大最小值
            onPick(min) {
              console.log("min" + min.minDate);
              console.log("max" + min.maxDate);
              if (min.maxDate) {
                today = null;
              } else {
                today = new Date(min.minDate).getTime()
              }
            },
            //控制禁用范围
            disabledDate(time) {
              if (!time) {
                return false;
              }
             //如果有最小值则控制前后一段时间的禁用范围
              if (today) {
                return (
                  time.getTime() - 1000 * 3600 * 24 * 30 * 3 >= today ||
                  time.getTime() <= today - 1000 * 3600 * 24 * 30 * 3
                );
              //如果有最大值 那么说明时间选择完成，将禁用范围放开可重新选择
              } else {
                return false;
              }
            },
          };

项目开发记录点