el-date-picker时间筛选

效果: 选中2022年5月1日之后 限制只能前后三个月；以及一些快捷日期选项

   <el-date-picker v-model="dateRange" :picker-options="pickerOptions" type="daterange" range-separator="至"
      start-placeholder="开始日期" end-placeholder="结束日期">
   </el-date-picker>

const oDate = new Date();
export default {
   data() {
      return {
         date: [],
         draftCount: 0,
         selectData: '',
         pickerOptions: {
            // 点击时，选择的是开始时间，也就是minDate
            onPick: ({
               maxDate,
               minDate
            }) => {
               this.selectData = minDate.getTime()
               if (maxDate) {
                  // 解除限制
                  this.selectData = ''
               }
            },
            disabledDate: (time) => {
               // 是否限制的判断条件
               if (this.selectData) {
                  let curDate = (new Date(this.selectData)).getTime();
                  let three = 90 * 24 * 3600 * 1000;
                  let threeMonths = curDate - three;
                  return time.getTime() < threeMonths || time.getTime() > curDate + three
               } else {
                  return false
               }
            },
            shortcuts: [{
                  text: '今日',
                  onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     start.setTime(start.getTime());
                     picker.$emit('pick', [start, end]);
                  }
               }, {
                  text: '昨日',
                  onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     start.setTime(start.getTime() - 3600 * 1000 * 24);
                     picker.$emit('pick', [start, start]);
                  }
               }, {
                  text: '本周',
                  onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     let day = start.getDay();
                     let date = start.getDate();
                     if (day != 0) {
                        start.setDate(date - (day - 1));
                     }
                     picker.$emit('pick', [start, end]);
                  }
               }, {
                  text: '上周',
                  onClick(picker) {
                     var oDate = new Date()
                     oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 7);
                     let day = oDate.getDay()
                     let start = new Date(),
                        end = new Date();
                     if (day == 0) {
                        start.setDate(oDate.getDate());
                        end.setDate(oDate.getDate() + 6);
                     } else {
                        start.setTime(oDate.getTime() - 3600 * 1000 * 24 * (day - 1));
                        end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (7 - day));
                     }
                     picker.$emit('pick', [start, end]);
                  }
               }, {
                  text: '本月',
                  onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     start.setDate(1);
                     picker.$emit('pick', [start, end]);
                  }
               }, {
                  text: '上月',
                  onClick(picker) {
                     let year = oDate.getFullYear();
                     let month = oDate.getMonth();
                     let start, end;
                     if (month == 0) {
                        year--
                        start = new Date(year, 11, 1)
                        end = new Date(year, 11, 31)
                     } else {
                        start = new Date(year, month - 1, 1)
                        end = new Date(year, month, 0);
                     }
                     picker.$emit('pick', [start, end]);
                  }
               },
               {
                  text: '本季度',
                  onClick(picker) {
                     let year = oDate.getFullYear();
                     let month = oDate.getMonth() + 1;
                     let n = Math.ceil(month / 3); // 季度
                     month = n * 3 - 1;
                     const start = new Date(year, month - 2, 1);
                     const end = new Date();
                     picker.$emit('pick', [start, end]);
                  }
               }, {
                  text: '上季度',
                  onClick(picker) {
                     let year = oDate.getFullYear();
                     let month = oDate.getMonth() + 1;
                     let n = Math.ceil(month / 3); // 季度，上一个季度则-1
                     let prevN = n - 1;
                     if (n == 1) {
                        year--
                        prevN = 4;
                     }
                     month = prevN * 3; // 月份
                     const start = new Date(year, month - 3, 1);
                     const end = new Date(year, month, 0);
                     picker.$emit('pick', [start, end]);
                  }
               },
               {
                  text: '本年',
                  onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     start.setMonth(0);
                     start.setDate(1);
                     picker.$emit('pick', [start, end]);
                  }
               }
            ]
         }
      }
   },
}