el-date-picker日期快捷键（今日、本周、本月、上月、本季、本年）

图示

需要使用到快捷键的vue页面

html

  
    
  
  今日
  本周
  本月
  上月

  
    
  
  本季
  本年

   

script

/**
 * 快捷键逻辑本来放在@/mixins/standard-list里的为了演示方便放在这里
 * 其他代码省略
**/

export default {
  data() {
    timeRange: [], // 时间区间---建单时间
    timeRange1: [], // 时间区间---支付时间
  },
  watch: {
    timeRange: {
      handler (newV) {
        if (newV instanceof Array) {
          this.searchData.createTimeBegin = newV[0];
          this.searchData.createTimeEnd = newV[1];
        } else {
          this.searchData.createTimeBegin = null;
          this.searchData.createTimeEnd = null;
        }
      }
    },
    timeRange2: {
      handler (newV) {
        if (newV instanceof Array) {
          this.searchData.payTimeBegin = newV[0];
          this.searchData.payTimeEnd = newV[1];
        } else {
          this.searchData.payTimeBegin = null;
          this.searchData.payTimeEnd = null;
        }
      }
    },
  },
  methods: {
    // 日期快捷键（默认绑定timeRange）
    shortcuts(text, ref='timeRange'){
      const start = new Date();
      const end = new Date();
      start.setHours(0);start.setMinutes(0);start.setSeconds(0);
      end.setHours(23); end.setMinutes(59); end.setSeconds(59);
      const month = start.getMonth()+1; // 0-11, 月份加1，方便和大月、小月口诀对应
      switch (text) {
        case 'today':
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case 'this-week':
          const today = start.getDate(); // 1-31
          const weekday = start.getDay() || 7; // 0-6, 若为0则改为7
          start.setDate(today+(1-weekday));
          end.setDate(today+(7-weekday));
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case 'this-month':
          start.setDate(1);
          if (month===1 || month===3 || month===5 || month===7 || month===8 || month===10 ||month===12) {
            end.setDate(31);
          }
          if (month===4 || month===6 || month===9 || month===11) {
            end.setDate(30);
          }
          if (month===2) {
            const year = start.getFullYear();
            if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {
              end.setDate(29);
            } else {
              end.setDate(28);
            }
          }
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case 'last-month':
          const lastMonth = start.getMonth() - 1;// 0-11, 月份减1，得到上月，-1-10
          if (lastMonth === -1) {
            const year = start.getFullYear();
            start.setFullYear(year - 1);
            start.setMonth(11);
            end.setFullYear(year - 1);
            end.setMonth(11);
            end.setDate(31); // -1月份单写
          } else {
            start.setMonth(lastMonth);
            end.setMonth(lastMonth);
          }
          start.setDate(1);
          const tem = lastMonth+1
          if (tem ===1 || tem===3 || tem===5 || tem===7 || tem===8 || tem===10) {
            end.setDate(31);
          }
          if (tem===4 || tem===6 || tem===9 || tem===11) {
            end.setDate(30);
          }
          if (tem===2) {
            const year = start.getFullYear();
            if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {
              end.setDate(29);
            } else {
              end.setDate(28);
            }
          }
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case 'this-quarter':
          const quarter = Math.floor((month%3 === 0 ? ( month/3 ) : ( month/3 + 1 )))
          start.setDate(1);
          if (quarter === 1) {
            start.setMonth(0);
            end.setMonth(2);
            end.setDate(31);
          }
          if (quarter === 2) {
            start.setMonth(3);
            end.setMonth(5);
            end.setDate(30);
          }
          if (quarter === 3) {
            start.setMonth(6);
            end.setMonth(8);
            end.setDate(30);
          }
          if (quarter === 4) {
            start.setMonth(9);
            end.setMonth(11);
            end.setDate(31);
          }
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case 'this-year':
          start.setMonth(0);
          start.setDate(1);
          end.setMonth(11);
          end.setDate(31);
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
      }
    },
  }
}