uniapp+vue3计算从当前月到后两个月的日期范围,并按照每周进行划分。同时标注出每周开始和结束日期对应的星期几

<template>
	<view class="container">
		<view v-if="weeks.length === 0" style="text-align: center; padding: 20px;">
			没有找到符合条件的周。
		</view>
		<view v-else v-for="(week, index) in weeks" :key="index" class="week-item">
			<text>{{ week.start }} - {{ week.end }}</text>
			<text>({{ week.startDayOfWeek }} 至 {{ week.endDayOfWeek }})</text>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	export default {
		setup() {
			const weeks = ref([]);
			const getWeeksInRange = (startDate, monthsToAdd) => {
				const resultWeeks = [];
				let currentDate = new Date(startDate);
				// 计算结束日期(当前月+monthsToAdd+1的月初)
				let endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + monthsToAdd + 1, 1);

				while (currentDate < endOfMonth) {
					// 确保每周从周一作为起始日
					let weekStart = new Date(currentDate);
					let dayOfWeek = weekStart.getDay(); // 获取当前日期是星期几
					// 如果不是周一,则调整到最近的周一
					if (dayOfWeek !== 1) {
						weekStart.setDate(weekStart.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
					}
					let weekEnd = new Date(weekStart);
					weekEnd.setDate(weekStart.getDate() + 6); // 结束于周日
					// 计算并格式化日期和星期几
					const startDayOfWeek = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][(weekStart.getDay() + 6) % 7];
					const endDayOfWeek = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][(weekEnd.getDay() + 6) % 7];
					resultWeeks.push({
						start: `${weekStart.getMonth() + 1}月${weekStart.getDate()}日`,
						end: `${weekEnd.getMonth() + 1}月${weekEnd.getDate()}日`,
						startDayOfWeek: startDayOfWeek,
						endDayOfWeek: endDayOfWeek
					});
					currentDate = new Date(weekEnd.getTime() + 24 * 60 * 60 * 1000); // 移动到下周
				}
				return resultWeeks;
			}
			onLoad(() => {
				const today = new Date();
				const calculatedWeeks = getWeeksInRange(today, 2);
				console.log('Calculated Weeks:', calculatedWeeks); // 调试输出
				weeks.value = calculatedWeeks;
			});
			return {
				weeks,
				getWeeksInRange
			};
		}
	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.week-item {
		margin-bottom: 15px;
		font-size: 16px;
	}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值