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>