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

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: '',
相关推荐
用户938515635076 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep6 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端6 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
浮生望7 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端
90后的晨仔7 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔7 小时前
别再搞混了!uni-app 中 node_modules 和 uni_modules 到底是什么关系?
前端
kyriewen8 小时前
面试官问"这段逻辑为什么这样写"——我才发现,这半年我写的代码,我自己都解释不了
前端·javascript·面试
谢小飞8 小时前
大文件上传很难?学会这招,GB文件秒传不是梦
前端·node.js
程序员黑豆9 小时前
Windows 系统 Java 环境变量配置全攻略:解决“不是内部或外部命令”
java·前端·ai编程
To_OC9 小时前
别只拿 useRef 绑 DOM 了,搭配 Web Worker 解决页面卡顿才是真的香
前端·react.js·dom