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

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: '',
相关推荐
融化的雪几秒前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript
Gazer_S12 分钟前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
鹏多多13 分钟前
前端IndexedDB数据库高效管理插件localForage的教程+案例
前端·javascript·vue.js
我血条子呢19 分钟前
[HTML]播放wav格式音频
前端·html·音视频
CodeSheep34 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员39 分钟前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc1 小时前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii661 小时前
120html
前端
.生产的驴1 小时前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
峥无1 小时前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html