uniapp封装日历组件

1、需求分析：获取当前日期的后5天，前15天日期组成一个数组。并按照3屏展示出来。且支持左右切换。如下图：

 

 2、思路：先获取指定日期区间，放在数组中。7天为一个周期，切割成3个数组。使用uni的swiper绘制页面。声明一个新的数组包含3个对象，与轮播图的数据相对应。

3、代码实现

获取时间周期和当前时间

//获取当前时间，格式YYYY-MM-DD HH:MM:SS
const GetNowTime = time => {
	var date = time,
		year = date.getFullYear(),
		month = date.getMonth() + 1,
		day = date.getDate(),
		hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
		minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
		second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	month >= 1 && month <= 9 ? (month = "0" + month) : "";
	day >= 0 && day <= 9 ? (day = "0" + day) : "";
	var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
	return {timer,day};
}

function GetDateStr(updateCount, AddDayCount) {
	var today = new Date()
	var dayList = []
	var dateArr = []
	for (var i = updateCount; i <= AddDayCount; i++) {
		var newDate = new Date(
			today.getTime() + i * 1000 * 60 * 60 * 24
		)
		var year = newDate.getFullYear() // getFullYear()代替getYear()
		// 月 getMonth()：0 ~ 11
		var month = addZero(newDate.getMonth() + 1)
		// 日 getDate()：(1 ~ 31)
		var day = addZero(newDate.getDate())
		// 时 getHours()：(0 ~ 23)
		var hour = addZero(newDate.getHours())
		// 分 getMinutes()： (0 ~ 59)
		var minute = addZero(newDate.getMinutes())
		// 秒 getSeconds()：(0 ~ 59)
		var second = addZero(newDate.getSeconds())
		dayList.push({
			'day': day,
			'month': month,
			'week': toWeekDay(newDate.getDay()),
			'year': year,
			'hour': hour,
			'minute': minute,
			'second': second,
			'alltime':`${year}-${month}-${day} ${hour}:${minute}:${second}`,
		})
		
		var fullDate =
			`${year}-${month}-${day} ${hour}:${minute}:${second}`
			// `${year}-${addZero(month)}-${addZero(day)}`
		dateArr.push({fullDate})
	}
	return {
		dayList,
		dateArr
	}
}

function addZero(s) {
	return s < 10 ? ('0' + s) : s
}

function toWeekDay(weekDay) { // 传入数据  讲一周的某一天返回成中文状态下的字符
	switch (weekDay) {
		case 1:
			return '一';
			break;
		case 2:
			return '二';
			break;
		case 3:
			return '三';
			break;
		case 4:
			return '四';
			break;
		case 5:
			return '五';
			break;
		case 6:
			return '六';
			break;
		case 0:
			return '日';
			break;
		default:
			break;
	}
	return '传入未知参数';
}
module.exports = {
	GetNowTime,
	GetDateStr
}

日历样式
<view class="date-choose shrink">
					<swiper class="date-choose-swiper" :indicator-dots="false" :current="numberDate"
						@change="dateSwiperChange($event)">
						<block v-for="(date,index) in dotArr" :key="index">
							<swiper-item class="swiper-item">
								<view class="weekday">
									<block v-for="(weekday,ind) in currentPage" :key="ind">
										<text class="week">{{ weekday.week }}</text>
									</block>
								</view>
								<view class="dateday">
									<block v-for="(weekdays,inds) in currentPage" :key="inds">
										<text class="day" :id="weekdays.day" @tap="chooseDate($event,weekdays)">
											<text
												:class="dateCurrentStr==weekdays.day?'active':''">{{ weekdays.day }}</text>
										</text>
									</block>
								</view>
								<view class="swiper-dot">
									<view class="dot-item" v-for="(dot,dotindex) in dotArr" :key="dotindex"
										:class="numberDate==dot?'activedot':''"></view>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>

.date-choose {
		overflow: hidden;
		width: 710rpx;
		height: 176rpx;
		background: #FEE5E1;
		border-radius: 10rpx;
	}

	.date-choose-swiper {
		height: 176rpx;
		padding-top: 10rpx;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
	}

	.weekday,
	.dateday {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		margin-top: 20rpx;
	}

	.week,
	.day {
		width: 14.286%;
		flex-basis: 14.286%;
	}

	.week {
		color: #666666;
		font-size: 24rpx;
	}

	.day text {
		position: relative;
		color: #333333;
		font-size: 28rpx;
		padding: 10rpx 13rpx;
	}

	.day .active {
		/* 圈圈 */
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		border-radius: 100%;
		background: #D32B20;
		z-index: -1;
		color: #FFFFFF;
	}

	.swiper-dot {
		display: flex;
		text-align: center;
		margin-top: 20rpx;
		padding-left: 45%;

		.dot-item {
			width: 11rpx;
			height: 6rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			margin-left: 8rpx;
		}

		.activedot {
			width: 25rpx;
			height: 6rpx;
			background: #D32B20;
			border-radius: 4rpx;
		}
	}

 逻辑代码

import common from '../../common/common.js';
	export default {
		data() {
			return {
				dateCurrent: new Date(), // 正选择的当前日期
				dateCurrentStr: '', // 正选择日期的 id
				numberDate: 2, //当前显示的是第几页
				currentPage: [], //当前页的所有数据信息
				splitArr: [], //切割后的数据
				nowDate: common.GetNowTime(new Date()).timer,
				dotArr: [0, 1, 2], //圆点集合
			}
		},
//将日期分为3组，获取近21天的日期，后五天以及前15天
			getSplit() {
				this.dayList = common.GetDateStr(-15, 5).dayList
				console.log(this.dayList, '左右日期');
				let size = 7 //一页共几条
				//循环这21个对象分成3组数据
				for (let i = 0; i < this.dayList.length; i += size) {
					this.splitArr.push(this.dayList.slice(i, i + size))
				}
				this.currentPage = this.splitArr[2] //将最后一页设置为当前页，因为要展示最新的日期
				this.numberDate = 2 //当前页
				var currentDay = common.GetNowTime(new Date()).day //获取当天的日期
				//如果当天的日期和最后一页其中一天的日期相等打上红点
				this.currentPage.forEach(el => {
					if (currentDay == el.day) {
						this.dateCurrentStr = el.day
					}
				})
			},
			// 日历组件轮播切换
			dateSwiperChange(e) {
				var index = e.detail.current; //获取当前切换的是哪一个页面
				this.currentPage = this.splitArr[index]; //设置为当前页
				this.numberDate = index; //当前页用于控制轮播切换
			},
			// 点击日历某日
			chooseDate(e, data) {
				var str = e.currentTarget.id; //选中的日期
				this.dateCurrentStr = str;
				this.parmas.liveTime = data.alltime
				this.getList()
				this.getLiveInfo()
			},