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>
相关推荐
胡志辉的博客1 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖1 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty2 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js
小二·2 小时前
Next.js 15 全栈开发实战
开发语言·javascript·ecmascript
Rain5093 小时前
2.1 Nest.js 项目初始化与模块化架构
开发语言·前端·javascript·后端·架构·数据分析·node.js
拾年2754 小时前
从零手写 Ajax:用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax
拉勾科研工作室5 小时前
区块链工程毕业论文题目【249个】
开发语言·javascript
小林ixn5 小时前
你以为你懂 + 号?看完这篇 Bun + TS 实战,才发现以前全写错了
前端·javascript·typescript
jvxiao6 小时前
你真的懂作用域吗?从编译原理角度深度 JS 的作用域
前端·javascript
Darling噜啦啦6 小时前
二叉树与递归算法实战:从树结构到 LeetCode 爬楼梯,一文吃透前端数据结构与递归思维
前端·javascript·数据结构