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

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

以下是做出来的效果，

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

直接上代码 “完整”

	
		打开弹窗
		选择的周数:{{ dateObj.showTime }}
		选择的时间是:{{ dateObj.startTime }}
		选择的时间是:{{ dateObj.endTime }}
		
			
				请选择日期
					
				
				
					按月选择
					按周选择
				
				
					
						{{ item }}年
					
					
						{{ item }}月
					
					
						{{ `第${index + 1}周(` + item + ')' }}
					
				
				
					确定
				
			
		
	



	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  {
		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



	// 日期选择
	.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;
			}
		}
	}