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>
相关推荐
2501_9462309810 小时前
Cordova&OpenHarmony提醒管理系统实现
android·javascript
C_心欲无痕10 小时前
vue3 - useId生成唯一标识符
前端·javascript·vue.js·vue3
KoalaShane10 小时前
El-slider 增加鼠标滚动滑块事件
开发语言·前端·javascript
C_心欲无痕11 小时前
vue3 - watchSyncEffect同步执行的响应式副作用
开发语言·前端·javascript·vue.js·vue3
小魔女千千鱼11 小时前
在 Vue 中,this 的行为在箭头函数和普通函数中是不同的
前端·javascript·vue.js
Rysxt_11 小时前
UniApp uni_modules 文件夹详细教程
开发语言·javascript·ecmascript
霍理迪12 小时前
CSS盒模型布局规则
前端·javascript·css
林恒smileZAZ12 小时前
使用自定义API接入OpenAI CodeX配置教程
javascript·codex·ai对接
千寻girling12 小时前
面试官: “ 说一下 JS 中什么是事件循环 ? ”
前端·javascript
Cassie燁12 小时前
el-table源码解读2-2——createStore()初始化方法
前端·javascript·vue.js