vue el-date-picker 设置可选近30天且时间范围为7天

对 el-date-picker 限制：

1. 默认选择时间范围为最近一天；
2. 设置快捷选项：最近1天、最近3天、最近7天等；
3. 限制只能选择今天以及今天以前30天；
4. 选择一个时间之后，另一个时间范围限制只能选择7天以内。

日期时间选择器组件：

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

设置 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();
          }
        }
      }
    }
  }
}

页面效果：