根据当前日期计算并选取上一个月和上一个季度的日期范围,用于日期控件的快捷选取功能

1.选择月份范围

代码如下:

html 复制代码
   <el-date-picker v-model="value" type="monthrange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
          </el-date-picker>
javascript 复制代码
 pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '上个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上季度',
          onClick(picker) {
            const end = new Date();
            const month = end.getMonth();
            let start = new Date();

            // 计算上一个季度的开始和结束日期
            if (month >= 0 && month <= 2) {  // 第一季度
              start.setFullYear(end.getFullYear() - 1, 9, 1);
              end.setFullYear(end.getFullYear() - 1, 11, 31);
            } else if (month >= 3 && month <= 5) {
              start.setFullYear(end.getFullYear(), 0, 1);
              end.setFullYear(end.getFullYear(), 2, 31);
            } else if (month >= 6 && month <= 8) {
              start.setFullYear(end.getFullYear(), 3, 1);
              end.setFullYear(end.getFullYear(), 5, 30);
            } else {  // 第四季度
              start.setFullYear(end.getFullYear(), 6, 1);
              end.setFullYear(end.getFullYear(), 8, 30);
            }

            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: ''

2.选择日期范围

代码如下:

html 复制代码
        <el-date-picker v-model="value" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
javascript 复制代码
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '上个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 1);
            start.setDate(1); 
            end.setMonth(end.getMonth() - 1);
            end.setMonth(end.getMonth() + 1, 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上季度',
          onClick(picker) {
            const end = new Date();
            const month = end.getMonth();
            let start = new Date();

            if (month >= 0 && month <= 2) {
              start.setFullYear(end.getFullYear() - 1, 9, 1);
              end.setFullYear(end.getFullYear() - 1, 11, 31);
            } else if (month >= 3 && month <= 5) {
              start.setFullYear(end.getFullYear(), 0, 1);
              end.setFullYear(end.getFullYear(), 2, 31);
            } else if (month >= 6 && month <= 8) {
              start.setFullYear(end.getFullYear(), 3, 1);
              end.setFullYear(end.getFullYear(), 5, 30);
            } else {
              start.setFullYear(end.getFullYear(), 6, 1);
              end.setFullYear(end.getFullYear(), 8, 30);
            }

            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: '',
相关推荐
Highcharts.js2 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发
LaughingZhu8 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫8 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux9 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水10 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger10 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)10 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态11 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态11 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart11 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter