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 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄3 天前
JavaScript 隐式全局变量解析
javascript
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端
paopaokaka_luck3 天前
智慧社区综合服务小程序(人脸识别、AI问答、Echarts图形化分析)
前端·javascript·spring boot·spring·数据分析·echarts
Hilaku3 天前
为什么死磕 1px 的团队,用户体验反而更差?
前端·javascript·程序员
陈拉斯3 天前
给公司年会写了个大屏抽奖系统:动画在前端跑,凭什么说结果没被改?
javascript
yzy853 天前
Vue中下载或打开文件的JavaScript方法
前端·javascript·vue
用户298698530143 天前
在 React 中用 JavaScript 将 Word 转换为文本
前端·javascript·react.js
李少兄3 天前
深入解析 JavaScript 中的 `document` 对象
javascript