vue的时间季度年选择器

使用说明

1. 复制代码就可以用，没有其它关联东西

注意

1. 季度和年那些如果那些日期还没过完，应到当天日期 比如本年还没过完 所以时间插件选择的时候是到 1月1日到7月19日

效果图

<!-- 注意: 季度和本年都需要判断是否过完当前季度和当前年度-->
<!-- vue+element 时间插件 -->
<template>
  <div class="block">
      <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator=""
        start-placeholder="" end-placeholder="" :picker-options="pickerOptions">
      </el-date-picker>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
              text: "今日",
              show: true,
              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: "昨日",
              show: true,
              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: "本周",
              show: true,
              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: "上周",
              show: true,
              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: "本月",
              show: true,
              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: "上月",
              show: true,
              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: '本年',
              show: true,
              onClick(picker) {
                //获取当前时间
                var currentDate = new Date();
                //获得当前年份4位年
                var currentYear = currentDate.getFullYear();

                //本年第一天
                const start = new Date(currentYear, 0, 1);
                //本年最后一天
                // 本年的最后一天应该是到当天而不是12月31日
                const end = new Date();
                console.log("2312", start, end);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: '上年',
              show: true,
              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: '本季度',
              show: true,
              onClick(picker) {
                //获取当前时间
                var currentDate = new Date();
                //获得当前年份4位年
                var currentYear = currentDate.getFullYear();

                //获取本季度第一天
                var start1 = new Date().getMonth();
                if (start1 >= 0 && start1 <= 2) {
                  start1 = 0
                } else if (start1 >= 3 && start1 <= 5) {
                  start1 = 3
                } else if (start1 >= 6 && start1 <= 8) {
                  start1 = 6
                } else if (start1 >= 9 && start1 <= 11) {
                  start1 = 9
                }
                console.log(start1)
                //本季度第一天
                const start = new Date(currentYear, start1, 1);
                //本季度最后一天
                const end = new Date();
                console.log("2312", start, end);

                picker.$emit("pick", [start, end]);
              }
            }, {
              text: '上季度',
              show: true,
              onClick(picker) {
                //获取当前时间
                var currentDate = new Date();
                //获得当前年份4位年
                var currentYear = currentDate.getFullYear();
                // 判断上季度日期最后一天是30还是31
                var endday1 = 30;
                //获取上季度第一月
                var start1 = new Date().getMonth();
                if (start1 >= 0 && start1 <= 2) {
                  start1 = 9
                  endday1 = 31
                  currentYear = currentYear - 1

                } else if (start1 >= 3 && start1 <= 5) {
                  start1 = 0
                  endday1 = 31
                } else if (start1 >= 6 && start1 <= 8) {
                  start1 = 3
                  endday1 = 30
                } else if (start1 >= 9 && start1 <= 11) {
                  start1 = 6
                  endday1 = 30
                }
                //上季度第一天
                const start = new Date(currentYear, start1, 1);
                //上季度最后一天
                const end = new Date(currentYear, start1 + 2, endday1);
                // console.log("2312", start, end);

                picker.$emit("pick", [start, end]);
                // console.log(start1)
              }
            },
            {
              text: '1季度',
              show: true,
              onClick(picker) {
                //获取当前时间
                var currentDate = new Date();
                //获得当前年份4位年
                var currentYear = currentDate.getFullYear();

                //第一季度第一天
                const start = new Date(currentYear, 0, 1);
                var end = new Date(currentYear, 2, 31);
                //第一季度最后一天,判断是否过完了本季度
                if(currentDate.getMonth()>2) {
                   end = new Date(currentYear, 2, 31);
                }else {
                   end = new Date();
                }
                console.log("2312", start, end);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: '2季度',
              show: (new Date().getMonth()>2)?true:false,
              onClick(picker) {
                //获取当前时间
                var currentDate = new Date();
                //获得当前年份4位年
                var currentYear = currentDate.getFullYear();
                //第二季度第一天
                const start = new Date(currentYear, 3, 1);
                var end = new Date(currentYear, 5, 30);
                //第二季度最后一天
                if(currentDate.getMonth()>5) {
                   end = new Date(currentYear, 5, 30);
                }else {
                   end = new Date();
                }
                console.log("2312", start, end);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: '3季度',
              show: (new Date().getMonth()>5)?true:false,
              onClick(picker) {
                //获取当前时间
                var currentDate = new Date();
                //获得当前年份4位年
                var currentYear = currentDate.getFullYear();
                const start = new Date(currentYear, 6, 1);
                var end = new Date(currentYear, 8, 30);
                if(currentDate.getMonth()>8) {
                   end = new Date(currentYear, 8, 30);
                }else {
                   end = new Date();
                }
                console.log("2312", start, end);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: '4季度',
              show: (new Date().getMonth()>8)?true:false,
              onClick(picker) {
                //获取当前时间
                var currentDate = new Date();
                //获得当前年份4位年
                var currentYear = currentDate.getFullYear();
                const start = new Date(currentYear, 9, 1);
                var end = new Date(currentYear, 11, 31);
                if(currentDate.getMonth()>8) {
                   end = new Date(currentYear, 11, 31);
                }else {
                   end = new Date();
                }
                console.log("2312", start, end);

                picker.$emit("pick", [start, end]);
              }
            }
          ],
        },
        value1: "",
        value2: "",
      };
    },
    created() {
      this.dayin()
    },
    methods: {
      // 判断是否显示，主要是季度问题，不要一二三四季度直接把方法删除了就行了
      dayin() {
        this.pickerOptions.shortcuts = this.pickerOptions.shortcuts.filter(item => {
          return item.show === true
        })
        console.log(this.pickerOptions.shortcuts)
      }
    }

  };
</script>


<style>
</style>