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>
相关推荐
董世昌4111 分钟前
什么是暂时性死区?
开发语言·前端·javascript
执行部之龙15 分钟前
JS-WebAPIs 学习笔记
前端·javascript·笔记·学习
hhcccchh16 分钟前
学习vue第十五天 子组件传递父组件(Emit事件)
javascript·vue.js·学习
LYFlied20 分钟前
Vue的computed与watch底层实现原理
前端·javascript·vue.js
学嵌入式的小杨同学22 分钟前
【嵌入式 C 语言实战】手动实现字符串四大核心函数(strcpy/strcat/strlen/strcmp)
c语言·开发语言·前端·javascript·数据结构·数据库·算法
牛马11123 分钟前
Vue 环境搭建
前端·javascript·vue.js
摘星编程28 分钟前
React Native for OpenHarmony 实战:NetworkInfo 网络信息详解
javascript·react native·react.js
@菜菜_达29 分钟前
HTML 进阶
前端·javascript·html
RFCEO1 小时前
网页三剑客HTML、CSS、JavaScript 三者的关系详解
javascript·css·html·网页编程
郑州光合科技余经理1 小时前
同城O2O系统架构解析:中台化如何赋能本地生活服务
java·开发语言·javascript·人工智能·系统架构·php·生活