elementUI日期选择器快速选择 快捷选择（本周、上周、本月、上月、季度等）

<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="value2"
        @change="dateTimechange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator=""
        start-placeholder=""
        end-placeholder=""
        :picker-options="pickerOptions"
        value-format="timestamp"
        clearable
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今日",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              console.log("23123", start, end);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨日",
            onClick(picker) {
              const start = new Date();
              start.setTime(start.getTime() - 24 * 60 * 60 * 1000);
              start.setHours(0, 0, 0, 0);
              const end = new Date();
              end.setTime(end.getTime() - 24 * 60 * 60 * 1000);
              end.setHours(23, 59, 59, 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "本周",
            onClick(picker) {
              var end = new Date();
              var week = end.getDay();
              //一天的毫秒数
              var millisecond = 1000 * 60 * 60 * 24;
              //减去的天数
              var minusDay = week != 0 ? week - 1 : 6;
              //本周 周一
              var monday = new Date(end.getTime() - minusDay * millisecond);
              const start = new Date(monday);
              start.setHours(0, 0, 0, 0);
              console.log("2312", start, end);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上周",
            onClick(picker) {
              // 上周开始时间
              const starta = new Date();
              var first = starta.getDate() - starta.getDay() - 6;
              var startDate = new Date(starta.setDate(first));
              const start = new Date(startDate);
              start.setHours(0, 0, 0, 0);
              //  上周结束时间
              var currentDate = new Date();
              var firsts = currentDate.getDate() - currentDate.getDay() - 6;
              var last = firsts + 6;
              var endDate = new Date(currentDate.setDate(last));
              const end = new Date(endDate);
              end.setHours(23, 59, 59, 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "本月",
            onClick(picker) {
              let currentDate = new Date();
              let currentMonth = currentDate.getMonth();
              //获得当前年份4位年
              let currentYear = currentDate.getFullYear();
              //求出本月第一天
              const start = new Date(currentYear, currentMonth, 1);
              const end = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上月",
            onClick(picker) {
              let that = this;
              //获取当前时间
              var currentDate = new Date();
              //获得当前月份0-11
              var currentMonth = currentDate.getMonth();
              //获得当前年份4位年
              var currentYear = currentDate.getFullYear();
              //获得上一个月的第一天
              if (currentMonth == 0) {
                currentMonth = 11; //月份为上年的最后月份
                currentYear--; //年份减1
                return new Date(currentYear, currentMonth, 1);
              } else {
                //否则,只减去月份
                currentMonth--;
              }

              const start = new Date(currentYear, currentMonth, 1);

              //获取当前时间
              var currentDates = new Date();
              //获得当前月份0-11
              var currentMonths = currentDates.getMonth();
              //获得当前年份4位年
              var currentYears = currentDates.getFullYear();

              //当为12月的时候年份需要加1
              //月份需要更新为0 也就是下一年的第一个月
              if (currentMonths == 11) {
                currentYears++;
                currentMonths = 0; //就为
              } else {
                //否则只是月份增加,以便求的下一月的第一天
                currentMonths++;
              }

              //一天的毫秒数
              var millisecond = 1000 * 60 * 60 * 24;
              //求出上月的最后一天
              var aa = new Date();
              var thisMonth = aa.getMonth();
              //获得当前年份4位年
              var thisYear = aa.getFullYear();
              //求出本月第一天
              var firstDay = new Date(thisYear, thisMonth, 1);
              var lastDay = new Date(firstDay.getTime() - millisecond);
              const end = new Date(lastDay);
              end.setHours(23, 59, 59, 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text:'本年',
             onClick(picker) {
               //获取当前时间  
            var currentDate=new Date();  
            //获得当前年份4位年  
            var currentYear=currentDate.getFullYear();  
              
            //本年第一天  
            const start=new Date(currentYear,0,1);  
            //本年最后一天  
            const end=new Date(currentYear,11,31); 
             console.log("2312", start, end);
              picker.$emit("pick", [start, end]);
            }
          },
            {
            text:'上年',
             onClick(picker) {
               //获取当前时间  
            var currentDate=new Date();  
            //获得当前年份4位年  
            var currentYear=currentDate.getFullYear()-1;  
              
            //本年第一天  
            const start=new Date(currentYear,0,1);  
            //本年最后一天  
            const end=new Date(currentYear,11,31); 
             console.log("2312", start, end);
              picker.$emit("pick", [start, end]);
            }
          },
            {
            text:'1季度',
             onClick(picker) {
               //获取当前时间  
            var currentDate=new Date();  
            //获得当前年份4位年  
            var currentYear=currentDate.getFullYear();  
              
            //第一季度第一天  
            const start=new Date(currentYear,0,1);  
            //第一季度最后一天  
            const end=new Date(currentYear,2,31); 
             console.log("2312", start, end);
              picker.$emit("pick", [start, end]);
            }
          },
           {
            text:'2季度',
             onClick(picker) {
               //获取当前时间  
            var currentDate=new Date();  
            //获得当前年份4位年  
            var currentYear=currentDate.getFullYear();  
            //第一季度第一天  
            const start=new Date(currentYear,3,1);  
            //第一季度最后一天  
            const end=new Date(currentYear,5,30); 
             console.log("2312", start, end);
              picker.$emit("pick", [start, end]);
            }
          },
           {
            text:'3季度',
             onClick(picker) {
               //获取当前时间  
            var currentDate=new Date();  
            //获得当前年份4位年  
            var currentYear=currentDate.getFullYear();  
            const start=new Date(currentYear,6,1);   
            const end=new Date(currentYear,8,30); 
             console.log("2312", start, end);
              picker.$emit("pick", [start, end]);
            }
          },
           {
            text:'4季度',
             onClick(picker) {
               //获取当前时间  
            var currentDate=new Date();  
            //获得当前年份4位年  
            var currentYear=currentDate.getFullYear();  
            const start=new Date(currentYear,9,1);  
            const end=new Date(currentYear,11,31); 
             console.log("2312", start, end);
              picker.$emit("pick", [start, end]);
            }
          }
        ],
      },
     value2: "",
     startTime: '',
     endTime: '',
    };
  },
  methods: {
 dateTimechange() {
        if (this.value2 && this.value2 > 0) {
          this.startTime = this.value2[0]
          this.endTime = this.value2[1]
        }
        console.log(this.value2, 'value2')
      },
    /***
     * 本月的第一天时间
     */
    getBeginMonth() {
      var aa = new Date();
      var thisMonth = aa.getMonth();
      //获得当前年份4位年
      var thisYear = aa.getFullYear();
      //求出本月第一天
      var firstDay = new Date(thisYear, thisMonth, 1);

      return firstDay;
    },

    getPriorMonthFirstDay(year, month) {
      //年份为0代表,是本年的第一月,所以不能减
      if (month == 0) {
        month = 11; //月份为上年的最后月份
        year--; //年份减1
        return new Date(year, month, 1);
      }
      //否则,只减去月份
      month--;
      return new Date(year, month, 1);
    },
  },
};
</script>
<style>
.block{
  width: 60px;
  height: 50px;
  overflow: hidden;
  background: lightblue;
}
.block .el-picker-panel *[slot="sidebar"],
.el-picker-panel__sidebar {
  position: absolute;
  top: 100;
  right: 0;
  /* bottom: 0; */
  width: 100%;
  height: 20%;
  /* display: flex; */
  border-bottom: 2px solid #e4e4e4;
  -webkit-box-sizing: border-box;
  /* box-sizing: border-box; */
  padding-top: 6px;
  background-color: #ffffff;
  overflow: auto;
}
.el-picker-panel__sidebar .el-picker-panel__shortcut {
  width: 80px;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  text-align: center;
  float: left;
  z-index: 10000;
  color: #9babc5;
}
.block .el-picker-panel *[slot="sidebar"] + .el-picker-panel__body,
.el-picker-panel__sidebar + .el-picker-panel__body {
  margin-left: 0;
  height: 410px;
  width: 600px;
}
.el-date-range-picker__content.is-left,
.el-date-range-picker .el-picker-panel__content {
  border-right: 1px solid #e4e4e4;
  margin-top: 80px;
}
.el-popper[x-placement^="bottom"] {
  /* margin-top: 12px; */
  width: 600px;
}
.block .el-picker-panel__body {
  top: 83px;
}
</style>