DatePicker 日期選擇器 快捷方法，今天，昨天，本周，上周，本月 ，上月，本季度，上季度，本年和上年腳本

需求就是日期選擇需要快捷方法，並且需要這些選項

今天，昨天，本周，本月，上月，本季度，上季度，本年，上年，最近7天，最近30天。

網上找了幾個，然后綜合了一下，基本滿足了需求功能要求，

上代碼

 

 <el-form-item label="時間段" prop="platformName">
              <el-date-picker
                v-model="queryParams.dateRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="開始日期"
                end-placeholder="結束日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>

快捷腳本

 pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "本周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              const nows = start.getDay()||7  //注意周日算第一天，如果周日查詢本周的話，天數是0，所有如     果是0，默認設置為7
              start.setTime(start.getTime() - 3600 * 1000 * 24 * ((nows - 1)));

              //start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上周",
            onClick(picker) {
              const dataValue = new Date();
              const year = dataValue.getFullYear();
              const month = dataValue.getMonth() + 1;
              const day = dataValue.getDate();
              var thisWeekStart; //本周周一的時間
              if (dataValue.getDay() == 0) {
                //周天的情況；
                thisWeekStart =
                  new Date(year + "/" + month + "/" + day).getTime() -
                  (dataValue.getDay() + 6) * 86400000;
              } else {
                thisWeekStart =
                  new Date(year + "/" + month + "/" + day).getTime() -
                  (dataValue.getDay() - 1) * 86400000;
              }
              const prevWeekStart = thisWeekStart - 7 * 86400000; //上周周一的時間
              const prevWeekEnd = thisWeekStart - 1 * 86400000; //上周周日的時間
              const start = new Date(prevWeekStart); //開始時間
              const end = new Date(prevWeekEnd); //結束時間
              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) {
               const start = new Date();
              const end = new Date(start);
              end.setMonth(start.getMonth());
              start.setMonth(start.getMonth() - 1);
              end.setDate(0);
              start.setDate(1);
              picker.$emit("pick", [start, end]); //https://blog.csdn.net/holily_/article/details/105990614
            },
          },
          {
            text: "本季度",
            onClick(picker) {

                 var y = new Date().getFullYear();  //當前年份
                var m = new Date().getMonth();  //當前月份
                var q = parseInt(m / 3);  //當前季度
                var qs = new Date(y, (q - 0) * 3, 1);  //上一季度的開始日期
             // var qe = new Date(y, (q+1) * 3, 0);  //上一季度的結束日期
                var qe = new Date();  //動態
             //var qe = new Date(y, (q+1) * 3, 0);  //上一季度的結束日期

            //   var currentDate = new Date()
            //   var currentYear = currentDate.getFullYear()
            //   var currentMonth = currentDate.getMonth()

            //   var start = ''
            //   var end = ''
            //   if (currentMonth == 0 || currentMonth == 1 || currentMonth == 2) {
            //     /* 第一季度 */
            //     start = new Date(currentYear, 0, 1)
            //    // end = new Date(currentYear, 2, 31)
            //     end = new Date()
            //   }
            //   if (currentMonth == 3 || currentMonth == 4 || currentMonth == 5) {
            //     /* 第二季度 */
            //     start = new Date(currentYear, 3, 1)
            //     //end = new Date(currentYear, 5, 30)
            //      end = new Date()
            //   }
            //   if (currentMonth == 6 || currentMonth == 7 || currentMonth == 8) {
            //     /* 第三季度 */
            //     start = new Date(currentYear, 6, 1)
            //    // end = new Date(currentYear, 8, 30)
            //     end = new Date()
            //   }
            //   if (
            //     currentMonth == 9 ||
            //     currentMonth == 10 ||
            //     currentMonth == 11
            //   ) {
            //     /* 第四季度 */
            //     start = new Date(currentYear, 9, 1)
            //    // end = new Date(currentYear, 11, 31)
            //     end = new Date()
            //   }
              //end.setHours(23, 59, 59, 0)
              picker.$emit('pick', [qs, qe])
             //https://blog.csdn.net/weixin_44683763/article/details/120481591
            },
          },

          {
            text: "上季度",
            onClick(picker) {

           var y = new Date().getFullYear();  //當前年份  https://zhidao.baidu.com/question/1388556289703065980.html 最簡單的方法大神就是大神，簡單，而且准確
            var m = new Date().getMonth();  //當前月份
            var q = parseInt(m / 3);  //當前季度
            var qs = new Date(y, (q - 1) * 3, 1);  //上一季度的開始日期
            var qe = new Date(y, q * 3, 0);  //上一季度的結束日期

            // var currentDate = new Date()
            //   var currentYear = currentDate.getFullYear()
            //   // 上季度
            //   var currentMonth = currentDate.getMonth() - 3

            //   var start = ''
            //   var end = ''
            //   if (currentMonth == 0 || currentMonth == 1 || currentMonth == 2) {
            //     /* 第一季度 */
            //     start = new Date(currentYear, 0, 1)
            //     end = new Date(currentYear, 2, 31)
            //   }
            //   if (currentMonth == 3 || currentMonth == 4 || currentMonth == 5) {
            //     /* 第二季度 */
            //     start = new Date(currentYear, 3, 1)
            //     end = new Date(currentYear, 5, 30)
            //   }
            //   if (currentMonth == 6 || currentMonth == 7 || currentMonth == 8) {
            //     /* 第三季度 */
            //     start = new Date(currentYear, 6, 1)
            //     end = new Date(currentYear, 8, 30)
            //   }
            //   if (
            //     currentMonth == 9 ||
            //     currentMonth == 10 ||
            //     currentMonth == 11
            //   ) {
            //     /* 第四季度 */
            //     start = new Date(currentYear, 9, 1)
            //     end = new Date(currentYear, 11, 31)
            //   }
              //end.setHours(23, 59, 59, 0)
              picker.$emit('pick', [qs, qe])
            },
          },
          {
            text: "本年",
            onClick(picker) {
               const end = new Date();
              const start = new Date().getFullYear();
              const startYear = new Date(start, 0, 1);
              picker.$emit("pick", [startYear, end]);
            },
          },
          {
            text: "上年",
            onClick(picker) {
             //獲取當前時間
              let currentDate = new Date()
              //獲得當前年份4位年
              let currentYear = currentDate.getFullYear() - 1

              //本年第一天
              const start = new Date(currentYear, 0, 1)
              //本年最后一天
              const end = new Date(currentYear, 11, 31)
              //end.setHours(23, 59, 59, 0)
              picker.$emit('pick', [start, end])
            },
          },
        //   {
        //     text: "最近一周",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        //   {
        //     text: "最近一個月",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        //   {
        //     text: "最近三個月",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        ],
      },

 效果圖