基于uniapp的日期选择器

<view class="content">
    <view class="dateWrap" @click="getDate()">
		<u-icon name="calendar" color="#2979ff" size="24"></u-icon>
		<u-input class="iptCfg" placeholder="请选择考勤日期" :value="selectMonth" suffixIcon="arrow-down" readonly />
    </view>
	<scroll-view scroll-x="true" :scroll-left="scrollLeft">
		<view class="date-content">
			<view v-for="(dateItem, index) in dateList" :key="index" class="date-item" :class="{ selected: index == selectIndex }" @click="handleDateSelect(index)">
		        <view v-if="dateItem.isToday" class="todayText">
				    <view class="circle"></view>今天
				</view>
				<view v-else>{{ dateItem.week }}</view>
				<view class="day-number">{{ dateItem.day }}</view>
			</view>
		</view>
	</scroll-view>
</view>
<u-datetime-picker :show="visible" v-model="value" mode="year-month" :maxDate="maxDate" :formatter="formatter" @confirm="confirm" @close="close" :closeOnClickOverlay="true"></u-datetime-picker>

<script>

mounted() {
	this.initDate();
},
methods: {
    //初始化日期,实现今天的日期高亮
    initDate() {
	    const now = new Date();
	    this.currentYear = now.getFullYear();
	    this.currentMonth = now.getMonth() + 1;
	    this.selectMonth = this.$moment().format('YYYY-MM');
	    this.form.signDate = this.$moment().format('YYYY-MM-DD');		
	    this.generateDateList();//获取当前月份的所有日期
    },
    // 生成日期列表（当月所有日期）
	generateDateList() {
		const currentMonthStart = this.$moment([this.currentYear, this.currentMonth - 1]);
		const today = this.$moment();
		const lastDay = currentMonthStart.clone().endOf('month').date();
		const dateList = [];
		for (let i = 1; i <= lastDay; i++) {
			const d = currentMonthStart.clone().date(i);
			const day = d.date();
			const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.day()];
			const isToday = d.isSame(today, 'day');
			dateList.push({
				day,
				week,
				isToday,
				isSelected: false
			});
		}
		this.dateList = dateList;
		this.calculateScrollLeft();//定位到当前日期所在位置
	},
    // 计算滚动位置，定位到今天的日期
	calculateScrollLeft() {
		const todayIndex = this.dateList.findIndex(item => item.isToday);
		if (todayIndex !== -1) {
		    this.selectIndex = todayIndex;//当前日期高亮赋值
		    // 每个日期项宽度为 100rpx
		    this.scrollLeft = todayIndex * 100;
		    this.form.signDate = this.selectMonth + '-' + this.dateList[todayIndex].day;
		    this.getList();//获取选择日期后的列表数据
		} else {
			this.selectIndex = 0;//非当前月份时,默认高亮第一天
			this.form.signDate = this.selectMonth + '-' + this.dateList[0].day;//列表传参
			this.getList();
		}
	},
    // 选择日--切换高亮
	handleDateSelect(index) {
		this.selectIndex = index;
		this.dateList.forEach((item) => {
			item.isSelected = false;
		});
		this.dateList[index].isSelected = true;
		this.form.signDate = this.selectMonth + '-' + this.dateList[index].day;
		this.getList();
	},
	//选择月份
	confirm(e) {
		this.currentYear = this.$moment(e.value).format('YYYY');
		this.currentMonth = this.$moment(e.value).format('MM');
		this.selectMonth = this.$moment(e.value).format('YYYY-MM');
		this.form.signDate = this.selectMonth + '-' + '01';
		this.visible = false;
		this.generateDateList();//选择月份,重新处理获取所属日
	},
    formatter(type, value) {
	    if (type === 'year') {
		    return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		return value
	},
	//日期弹框
	getDate() {
		this.defaultDate = this.form.signDate ? this.form.signDate : '';
		this.visible = true;
	},
    //逻辑处理
    getList() {

    }
}

<style>
    .date-content {
		width: 100%;
		display: flex;
		overflow-x: auto;
		margin-top: 10rpx;
	}

	.date-item {
		display: flex;
		flex-direction: column;
		width: 200rpx;
		align-items: center;
		margin-right: 20rpx;
		padding: 24rpx 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		transition: background-color 0.3s;
	}

	.todayText {
		position: relative;

		.circle {
			position: absolute;
			top: -14rpx;
			left: 20rpx;
			width: 10rpx;
			height: 10rpx;
			background-color: red;
			border-radius: 50%;
		}
	}

	.date-item.today {
		color: #fff;
		background-color: #1989fa;
	}

	.date-item.selected {
		color: #fff;
		background-color: #1989fa;
	}

	.date-item.today text {
		color: #ffffff;
	}

	.date-item text {
		color: #606266;
		font-size: 28rpx;
		margin-bottom: 8rpx;
	}

	.day-number {
		margin-top: 10rpx;
		width: 60rpx;
		text-align: center;
		// color: #303133;
		font-size: 36rpx;
		font-weight: bold;
	}
</style>

效果展示

---------可封装组件,后期再完善--------