vue2el-时间选择器快捷方式

需求

近一周 （包含当天，这周三到上周四），近一个月、近 三个月 都包含当天
如果遇见当前为3月30，近一个月应该是 2月28到 3月30，当前为3月29也是从2月28开始，三个月同理

<template>
  <div>
    <el-button>btn</el-button>
    <el-date-picker
      v-model="dateValue"
      type="daterange"
      align="left"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="disableTimeOption"
      popper-class="current-count"
    ></el-date-picker>
  </div>
</template>
<script>
// import moment from 'moment'
export default {
  name: 'CustomDatePicker',
  data() {
    const date = new Date()
    const preMonth = date.getMonth()
    const preThreeMonth = date.getMonth() - 2
    const preSecondMonth = date.getMonth() - 1
    const currentYear = date.getFullYear()
    const preMonthAllDay = new Date(currentYear, preMonth, 0).getDate()
    const preThreeMonthAllDay = new Date(
      currentYear,
      preThreeMonth,
      0
    ).getDate()
    const preSecondMonthAllDay = new Date(
      currentYear,
      preSecondMonth,
      0
    ).getDate()
    const currentDay = date.getDate()
    return {
      dateValue: '',
      pickerOptions: {
        // disabledDate: (time) => {
        //   if (this.pickerMinDate) {
        //     return (
        //       time.getTime() > this.pickerMinDate + this.day14 ||
        //       time.getTime() < this.pickerMinDate - this.day14
        //     )
        //   }
        //   return false
        // },
        // onPick: ({ maxDate, minDate }) => {
        //   if (minDate && this.pickerMinDate) {
        //     this.pickerMinDate = null
        //   } else if (minDate) {
        //     this.pickerMinDate = minDate.getTime()
        //   }
        // },
        shortcuts: [
          {
            text: '七天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              const absTime = currentDay + (preMonthAllDay - currentDay)
              let startDay = absTime
              if (currentDay > preMonthAllDay) {
                startDay = currentDay
              }
              start.setTime(start.getTime() - 3600 * 1000 * 24 * startDay)
              end.setTime(end.getTime())
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              const absTime =
                preThreeMonthAllDay - currentDay < 0
                  ? currentDay + preMonthAllDay + preSecondMonthAllDay
                  : currentDay +
                    preMonthAllDay +
                    preSecondMonthAllDay +
                    (preThreeMonthAllDay - currentDay)
              const startDay = absTime
              console.log(startDay)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * startDay)
              end.setTime(end.getTime())
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    disableTimeOption(e) {
      // console.log(e)
    }
  }
}
</script>
<style lang="less">
.current-count {
  .el-picker-panel__sidebar {
    width: 220px;
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: 1px solid #e4e4e4;
    box-sizing: border-box;
    padding-top: 6px;
    background-color: #fff;
    overflow: auto;
    left: 0;
    height: 100%;
  }
  .el-picker-panel [slot='sidebar'] + .el-picker-panel__body,
  .el-picker-panel__sidebar + .el-picker-panel__body {
    margin-left: 220px;
  }
  .el-picker-panel__sidebar {
    .el-picker-panel__shortcut {
      display: inline-block;
      width: 90px;
      padding: 0;
      text-align: center;
      background-color: #b0c8e04d;
      margin: 0 9px;
      border-radius: 6px;
      margin-bottom: 6px;
    }
  }
}
</style>