The vue el-date-picker setting can be set to nearly 30 days and the time range is 7 days

To el-date-pickerlimit :

1. The default selection time range is the latest day;
2. Set shortcut options: last 1 day, last 3 days, last 7 days, etc.;
3. The limit can only choose today and 30 days before today;
4. After selecting a time, another time range can only be selected within 7 days.

Date time picker component:

<el-date-picker v-model="actDate" :picker-options="pickerOptions" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp"></el-date-picker>   

settings pickerOptions:

export default {
    
    
  data () {
    
    
    return {
    
    
      choiceDate: '',
      // 默认日期选择是最近一天
      actDate: [new Date().getTime() - 3600 * 1000 * 24 * 1, new Date().getTime()],
      pickerOptions: {
    
    
        shortcuts: [{
    
    
          text: '最近15分钟',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 1000 * 15 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
    
    
          text: '最近30分钟',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 1000 * 30 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
    
    
          text: '最近1小时',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 1 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
    
    
          text: '最近3小时',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 3 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
    
    
          text: '最近6小时',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 6 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
    
    
          text: '最近12小时',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 12 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
    
    
          text: '最近1天',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
    
    
          text: '最近3天',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            picker.$emit('pick', [start, end]);
          }
        }, {
    
    
          text: '最近7天',
          onClick (picker) {
    
    
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }],
        onPick: ({
     
      maxDate, minDate }) => {
    
    
          // 把选择的第一个日期赋值给一个变量
          this.choiceDate = minDate.getTime();
          // 如何已经选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = "";
        },
        disabledDate: (time) => {
    
    
          // 如何选择了一个日期
          if (this.choiceDate) {
    
    
            // 7天的时间戳
            const date = 6 * 24 * 3600 * 1000;
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - date;
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + date;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime
              // 限制不能选择今天以后
              || time.getTime() > Date.now()
            );
          } else {
    
    
            // 如果没有选择日期，就要限制不能选择今天以后
            return time.getTime() > Date.now();
          }
        }
      }
    }
  }
}

Page effect: