element-ui时间选择器快捷键的选择设置

博客包含放图和上代码操作,还转载自https://www.cnblogs.com/xiaohuasan/p/15908038.html ,涉及UI和前端开发,运用了JavaScript技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、放图

2、上代码

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.youkuaiyun.com/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.youkuaiyun.com/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]);
        //     },
        //   },
        ],
      },

3、转载自https://www.cnblogs.com/xiaohuasan/p/15908038.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值