qujiancesu/components/dateSelection/dateSelection.vue

<template>
	<!-- 日期弹窗 -->
	<view class="popUpNotification" v-if="Props.modelValue"  @click.stop="close">
		<view class="box" @click.stop="Props.modelValue=true">
			<view class="top">
				<view class="l" @click="dayindex=dayindex+1" ><uni-icons v-if="dayindex<daydata.monthGroups.length-1" type="left" size="18rpx"></uni-icons>
				</view>
				<view class="c">{{daydata.monthGroups[dayindex].year}}年 {{daydata.monthGroups[dayindex].month}}月 </view>
				<view class="r" @click="dayindex=dayindex-1" ><uni-icons v-if="dayindex>0" type="right" size="18rpx"></uni-icons>
				</view>
			</view>
			<view class="day">
				<view>一</view>
				<view>二</view>
				<view>三</view>
				<view>四</view>
				<view>五</view>
				<view>六</view>
				<view>日</view>
			</view>
			<view class="form">
				<view v-for="item in daydata.monthGroups[dayindex].days" @click.stop="settime(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`,!daydata.day.includes(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`))" :class="{del:!daydata.day.includes(`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`),on:chooseday==`${daydata.monthGroups[dayindex].year}-${daydata.monthGroups[dayindex].month}-${item}`}">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const daydata=ref({});
	const chooseday=ref("");
	const dayindex=ref(0)
	const adssEmits = defineEmits(["update:modelValue","change"])
	const Props= defineProps({
		style:{
			type:Object,
			default:{}
		},
		modelValue:{
			type:Boolean,
			default:false
		}
	})
	
	function getCompleteMonthData() {
		const today = new Date();
		const day = [];
		// 1. 获取过去30天的日期并按月分组
		const monthGroups = {};
		for (let i = 0; i <= 30; i++) {
			const date = new Date(today);
			date.setDate(today.getDate() - i);
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const monthKey = `${year}-${month.toString().padStart(2, '0')}`;
			day.push(`${year}-${month}-${date.getDate()}`)
			if (!monthGroups[monthKey]) {
				monthGroups[monthKey] = {
					year,
					month,
					days: getDays(new Date(year, month, 0).getDate()) // 获取该月完整天数
				};
			}
		}
		
		function getDays(l) {
			let _data = [];
			for (let m = 1; m <= l; m++) {
				_data.push(m)
			}
			return _data;
		}
		
		return {
			day,
			monthGroups:Object.values(monthGroups)
		}
	}
	daydata.value = getCompleteMonthData()
	chooseday.value=daydata.value.day[0];
	
	// reset()
	function close(){
		Props.modelValue=false;
		adssEmits("update:modelValue",false)
	}
	function settime(time,type){
		if(!type){
			chooseday.value=time;
			adssEmits("change",time)
			Props.modelValue=false;
			adssEmits("update:modelValue",false)
		}
		
	}
	function reset(){
		chooseday.value=daydata.value.day[0];
		dayindex.value=0;
		// adssEmits("change",chooseday.value)
	}
	defineExpose({
		reset
	})
</script>

<style scoped lang="scss">
	.popUpNotification {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		z-index: 22;
	
		&>.box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			width: 300rpx;
	
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				align-items: center;
				background: #F6F6F6;
				padding: 10rpx 15rpx;
	
				.c {
					font-size: 13rpx;
					font-weight: 800;
				}
	
			}
	
			.day {
				margin: 0rpx 15rpx;
				display: flex;
				align-items: center;
				margin: 10rpx 10rpx;
	
				view {
					flex: 1;
					text-align: center;
					font-size: 10rpx;
					color: rgba(0, 0, 0, 0.88);
				}
			}
	
			.form {
				display: grid;
				flex-wrap: wrap;
				grid-template-columns: repeat(7, 1fr);
				gap: 5rpx;
				padding: 0rpx 10rpx;
				padding-bottom: 10rpx;
	
				view {
					text-align: center;
					flex: 1 1 1 1 1 1 1;
					background: #F4F7FF;
					color: #4D7BFF;
					font-size: 11rpx;
					border-radius: 3rpx;
					padding: 10rpx 0;
				}
	
				.on {
					background: #4D7BFF;
					color: #fff;
	
				}
	
				.del {
					background: transparent;
					color: #999999;
				}
			}
	
		}
	}
</style>