Element自定义快捷日期选择

需求：使用element的DatePicker日期选择器，需要自定义快捷日期选择，以便于更好的查看数据。（此处的日期选择器为组件，按需修改）

<template>
  <div class="block">
    <div :class="{ 'show': !actived }" style="transition: all 500ms;">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="-"
        start-placeholder="指标开始时间"
        end-placeholder="指标结束时间"
        value-format="yyyy-MM-dd"
        @change="pick"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<style scoped>
  .block {
    width: auto;
    height: 40px;
    overflow: hidden;
  }
  .show {
    opacity: 1;
    margin-top: -100px;
    transition: all 500ms;
  }
</style>
<script>
  export default {
    props: ['actived'],
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '昨日',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近7天',
            onClick(picker) {
              const end = new Date();
              const start = 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 lastWeek = new Date().getDay()  //获取今日周几
              //开始时间(上周一与今天间隔的天数)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * (7 + lastWeek - 1)); //减1是因为以下时间戳操作,例如周二,但是时间戳还在周一后的xx小时
              //结束时间(上周末与今天间隔的天数)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * lastWeek);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date()
              //方法1
              const endDay = new Date().getDate() - 1  //获取今日几号,减1是因为以下时间戳操作,例如今日16号,但是时间戳还在15号后的xx小时
              start.setTime(start.getTime() - 3600 * 1000 * 24 * endDay);

              //方法2
              // start.setDate(1) //setDate(1)表示设置开始时间为本月1号,此办法同样可以实现
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '上个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              const year = new Date().getFullYear()  //获取年份
              let month = new Date().getMonth()  //获取月份
              month = month == 0? 1 : month  //特殊处理:如果为1月 则下方取1月的天数
              const feb_days = year %4 ? 29 : 28  //判断今年是否为闰年,如是则二月天数为29天,反之为28天
              let days = [ 31, feb_days, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]  //罗列12个月的天数
              start.setDate(1 - days[ month - 1 ])  //setDate(1)表表示设置为本月1号,故 本月1号 - 上月天数 = 上月1号
              end.setDate(1 - 1)  //以此得出,本月1号 - 1天 = 上月最后一天
              picker.$emit('pick', [start, end]);
            }
          },]
        },
        value1: '',
      };
    },
    methods: {
      pick() {
        if (this.value1) {
          let time = new Date(this.value1[1]).getTime();
          let nowDate = Date.parse(new Date());
          if (time > nowDate) {
            this.$message({
              message: '结束时间不能超过今天',
              type: 'error',
              duration: 1500
            });
            return
          }
        }else {
          this.value1 = [ '', '' ]
        }
        this.$emit('pick', this.value1);
      }
    }
  };
</script>