hlt_app/components/Calendar/CustomCalendar.vue

<template>
	<view class="custom-calendar">
		<view class="date-select-segment">
			<view class="date-item" :class="{'current-item':current===index, 'not-allow':isAfter(item)}" v-for="(item,index) in dateList"
				:key="index" @tap="!isAfter(item) && handleClick(item, index)">
				<view class="date-item-week">
					{{getWeek(item)}}
				</view>
				<view class="date-item-date">
					{{moment(item).format('MM/DD')}}
				</view>
			</view>
			<view class="date-item">
				<uni-datetime-picker type="date" v-model="currentDate" @change="handleDateChange" :end="moment().format(fmt)">
					<view class="date-picker-inner">
						<uni-icons size="26" type="calendar"></uni-icons>
						<view>
							日历
						</view>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		defineEmits,
		watch
	} from 'vue';
	import moment from 'moment';
	const dateList = ref([])
	const current = ref(2)
	const currentDate = ref(moment().format('YYYY-MM-DD'))
	const emit = defineEmits(['onDateChangeEvent'])
	
	const fmt = "YYYY-MM-DD"
	const setDateList = (date) => {
		let list = []
		list.push(date.clone().subtract(2, 'days').format(fmt))
		list.push(date.clone().subtract(1, 'days').format(fmt))
		list.push(date.clone().format(fmt))
		list.push(date.clone().add(1, 'days').format(fmt))
		list.push(date.clone().add(2, 'days').format(fmt))
		dateList.value = list
		current.value = 2
	}
	setDateList(moment())

	const handleDateChange = (e) => {
		currentDate.value = e
		setDateList(moment(e))
		emit('onDateChangeEvent', e)
	}
	const weeks = ["周天", "周一", "周二", "周三", "周四", "周五", "周六"]
	const getWeek = (date) => {
		return weeks[moment(date).day()]
	}
	
	const handleClick = (date, index)=>{
		currentDate.value = moment(date).format(fmt)
		current.value = index
		emit('onDateChangeEvent', currentDate.value)
	}
	
	const isAfter = (date)=>{
		return moment(date).isAfter(moment())
	}
</script>

<style lang="scss" scoped>
	.custom-calendar {

		.date-select-segment {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.date-item {
				// flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				border-radius: 12rpx;
				// padding: 0 10rpx;
				flex: 0 0 15%;
				min-height: 110rpx;
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-feature-settings: "kern" on;
				color: $uni-text-color;

				::v-deep .date-picker-inner {
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					min-height: 110rpx;
				}
			}
			.current-item{
				background: linear-gradient(180deg, #41B1F7 0%, #0671DD 100%);
				color: #fff;
			}
			
			.not-allow{
				cursor: not-allowed;
				color: $uni-text-color-disable;
			}
		}
	}
</style>