js:获取上一周,本周,下一周,上个月,本月,下个月的日期时间段

获取上一周,本周,下一周,上个月,本月,下个月的日期时间段

javascript 复制代码
<template>
  <div>
    <!-- 按钮组 -->
    <el-button type="primary" @click="getDateRange('lastWeek')">上一周</el-button>
    <el-button type="primary" plain @click="getDateRange('currentWeek')">本 周</el-button>
    <el-button type="primary" plain @click="getDateRange('nextWeek')">下一周</el-button>
    <el-button type="primary" plain @click="getDateRange('lastMonth')">上个月</el-button>
    <el-button type="primary" plain @click="getDateRange('currentMonth')">本 月</el-button>
    <el-button type="primary" plain @click="getDateRange('nextMonth')">下个月</el-button>

    <!-- 测试:显示当前选中的时间段 -->
    <div style="margin-top: 20px;">
      选中时间段:{{ selectedRange[0] }} 至 {{ selectedRange[1] }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRange: [] // 存储选中的日期范围 [开始日期, 结束日期]
    };
  },
  methods: {
    /**
     * 获取日期时间段
     * @param {string} type - 时间段类型:lastWeek/currentWeek/nextWeek/lastMonth/currentMonth/nextMonth
     * @returns {array} - [开始日期(YYYY-MM-DD), 结束日期(YYYY-MM-DD)]
     */
    getDateRange(type) {
      const now = new Date(); // 当前日期
      let startDate, endDate;

      switch (type) {
        // 上一周
        case 'lastWeek':
          // 本周一的前7天 = 上周一
          startDate = new Date(now.setDate(now.getDate() - now.getDay() - 6));
          // 上周一 + 6天 = 上周日
          endDate = new Date(now.setDate(startDate.getDate() + 6));
          break;

        // 本周(周一至周日)
        case 'currentWeek':
          // 当前日期 - 星期几(0=周日)+ 1 = 本周一(若周日则减6天)
          startDate = new Date(now.setDate(now.getDate() - (now.getDay() || 7) + 1));
          // 本周一 + 6天 = 本周日
          endDate = new Date(now.setDate(startDate.getDate() + 6));
          break;

        // 下一周
        case 'nextWeek':
          // 本周一 + 7天 = 下周一
          startDate = new Date(now.setDate(now.getDate() - (now.getDay() || 7) + 8));
          // 下周一 + 6天 = 下周日
          endDate = new Date(now.setDate(startDate.getDate() + 6));
          break;

        // 上个月
        case 'lastMonth':
          // 本月1号的前1天 = 上个月最后一天
          endDate = new Date(now.getFullYear(), now.getMonth(), 0);
          // 上个月1号
          startDate = new Date(now.getFullYear(), now.getMonth() - 1, 1);
          break;

        // 本月
        case 'currentMonth':
          // 本月1号
          startDate = new Date(now.getFullYear(), now.getMonth(), 1);
          // 本月最后一天
          endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
          break;

        // 下个月
        case 'nextMonth':
          // 下个月1号
          startDate = new Date(now.getFullYear(), now.getMonth() + 1, 1);
          // 下个月最后一天
          endDate = new Date(now.getFullYear(), now.getMonth() + 2, 0);
          break;
      }

      // 格式化日期为 YYYY-MM-DD
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      };

      const range = [formatDate(startDate), formatDate(endDate)];
      this.selectedRange = range; // 存储到数据中,供后续使用(如接口查询)

      // 可在此处调用接口,传递时间段参数
      // this.fetchData(range[0], range[1]);

      return range;
    },

    // 示例:调用接口(根据实际需求修改)
    fetchData(start, end) {
      console.log('查询时间段:', start, '至', end);
      // 你的接口请求逻辑...
      // this.$axios.get('/api/data', { params: { start, end } });
    }
  }
};
</script>
相关推荐
清汤饺子3 小时前
OpenClaw 本地部署教程 - 从 0 到 1 跑通你的第一只龙虾
前端·javascript·vibecoding
颜酱3 小时前
图的数据结构:从「多叉树」到存储与遍历
javascript·后端·算法
橙某人7 小时前
LogicFlow 小地图性能优化:从「实时克隆」到「占位缩略块」!🚀
前端·javascript·vue.js
boooooooom8 小时前
讲清 Proxy + effect + track/trigger 流程
javascript·vue.js·面试
leafyyuki8 小时前
在 Vue 项目中玩转 FullCalendar:从零搭建可交互的事件日历
前端·javascript·vue.js
豆苗学前端8 小时前
彻底讲透浏览器缓存机制,吊打面试官
前端·javascript·面试
swipe9 小时前
箭头函数与 this 面试题深度解析:从原理到实战
前端·javascript·面试
进击的尘埃10 小时前
拖拽搭建场景下的智能布局算法:栅格吸附、参考线与响应式出码
javascript
小猪努力学前端10 小时前
基于PixiJS的试玩广告开发-续篇
前端·javascript·游戏
wuhen_n11 小时前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js