uniapp-实现、按月 - 按周、选择日期

 H5项目，用户需求可以按月按周来查看数据，以上是ui 出的图

以下是做出来的效果，

 用到的是uniapp自带的内置组件 + day.js  + scss

直接上代码 “完整”

<template>
	<view>
		<button @click="open">打开弹窗</button>
		<view>选择的周数:{{ dateObj.showTime }}</view>
		<view>选择的时间是:{{ dateObj.startTime }}</view>
		<view>选择的时间是:{{ dateObj.endTime }}</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="my_popup">
				<view class="my_selectDeta"
					>请选择日期
					<text
						class="icon iconcool guanbi-line my_selectDeta_icon"
						@click="iconClose"></text>
				</view>
				<view class="tabbar">
					<view :class="current ? 'bg' : ''" @click="current = true"
						>按月选择</view
					>
					<view :class="!current ? 'bg' : ''" @click="current = false"
						>按周选择</view
					>
				</view>
				<picker-view
					:indicator-style="indicatorStyle"
					:value="selectValue"
					class="picker-view"
					@change="bindChange">
					<picker-view-column>
						<view
							v-for="(item, index) in years"
							:key="index"
							class="item"
							>{{ item }}年</view
						>
					</picker-view-column>
					<picker-view-column v-show="current">
						<view
							v-for="(item, index) in months"
							:key="index"
							class="item"
							>{{ item }}月</view
						>
					</picker-view-column>
					<picker-view-column v-show="!current">
						<view
							v-for="(item, index) in weeks"
							:key="index"
							class="item"
							>{{ `第${index + 1}周(` + item + ')' }}</view
						>
					</picker-view-column>
				</picker-view>
				<button class="my_button" type="primary" @click="close">
					确定
				</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs';
	import { ref, computed, onMounted, watch } from 'vue';
	// #region  选择日期 月 周
	const dateObj = ref({});
	const current = ref(true);
	const indicatorStyle = `height: 100rpx;`;
	const popup = ref(null);
	const myDate = new Date();
	const years = [];
	const year = ref(myDate.getFullYear());
	const months = [];
	const month = ref(myDate.getMonth() + 1);
	const week = ref('');
	const showWeek = ref('第1周');
	const payload = ref({});
	onMounted(() => {
		week.value = weeks.value[0];
	});
	for (let i = myDate.getFullYear() - 5; i <= myDate.getFullYear(); i++) {
		years.push(i);
	}
	const selectValue = ref([5, month.value - 1, 0]);
	for (let i = 1; i <= 12; i++) {
		months.push(i);
	}
	const bindChange = (e) => {
		const val = e.detail.value;
		year.value = years[val[0]];
		month.value = months[val[1]];
		week.value = weeks.value[val[2]];
		showWeek.value = '第' + (val[2] + 1) + '周';
	};
	watch(year, (newValue) => {
		const index = years.findIndex((item) => item == newValue);
		selectValue.value = [index, month.value - 1, 0];
	});
	const open = () => {
		popup.value.open('bottom');
	};
	const close = () => {
		if (current.value) {
			// 月
			month.value = month.value > 10 ? month.value : '0' + month.value;
			payload.value = {
				startTime: year.value + '-' + month.value + '-' + '01',
				endTime: year.value + '-' + month.value + '-' + '31',
				showTime: year.value + '-' + month.value
			};
		} else {
			// 周
			const [firstWeek, lastWeek] = week.value
				.split('-')
				.map((item) => item.replace('/', '-'));
			payload.value = {
				startTime: year.value + '-' + firstWeek,
				endTime: year.value + '-' + lastWeek,
				showTime: year.value + '-' + showWeek.value
			};
		}
		dateObj.value = payload.value;
		popup.value.close();
	};
	const iconClose = () => {
		popup.value.close();
	};
	const weeks = computed(() => {
		const ONE_DAY = 24 * 3600 * 1000;
		let firstDay =
			new Date(year.value + '/01/01').getDay() == 0
				? 7
				: new Date(year.value + '/01/01').getDay();
		let weeklist = [];
		let firstweekday = '';
		let endweekday = new Date(year.value + '/12/28').getTime();
		if (firstDay > 4) {
			firstweekday =
				new Date(year.value + '/01/01').getTime() +
				(8 - firstDay) * ONE_DAY;
		} else if (firstDay <= 4) {
			firstweekday =
				new Date(year.value + '/01/01').getTime() -
				(firstDay - 1) * ONE_DAY;
		}
		for (let i = 0; i < 54; i++) {
			let numWeek = i * 7 * ONE_DAY;
			let firstday = firstweekday + numWeek;
			let endday = firstday + 6 * ONE_DAY;
			if (firstday <= endweekday) {
				weeklist.push(
					`${dayjs(firstday).format('MM/DD')}-${dayjs(endday).format(
						'MM/DD'
					)}`
				);
			}
		}
		return weeklist;
	});
	//#endregion
</script>

<style lang="scss" scoped>
	// 日期选择
	.my_popup {
		height: 1000rpx;
		border-radius: 8rpx 8rpx 0 0;
		position: relative;
		font-size: 36rpx;
		font-weight: 500;
		color: #1b1d21;
		.my_selectDeta {
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			position: relative;
			.my_selectDeta_icon {
				position: absolute;
				right: 24rpx;
				top: 0;
			}
		}
		.my_button {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 24rpx 36rpx;
		}
		.picker-view {
			width: 750rpx;
			height: 600rpx;
			margin-top: 20rpx;
			.item {
				line-height: 100rpx;
				text-align: center;
			}
		}
		.tabbar {
			box-sizing: border-box;
			width: 328rpx;
			padding: 8rpx;
			height: 72rpx;
			margin: 0 auto;
			display: flex;
			border-radius: 8rpx;
			background-color: #f4f5f7;
			justify-content: space-around;
			view {
				padding: 5rpx 12rpx;
				font-size: 30rpx;
				color: #1b1d21;
				background: #f4f5f7;
			}
			.bg {
				background: rgb(1, 1, 202);
				border-radius: 8rpx;
				color: white;
			}
		}
	}
</style>