uni-app日历插件范围选取填坑

uni-app官方的日历组件，官方介绍的也比较笼统，真是无脑输出，上来就是干，能不能用，好不好用是一概不问。uni-app产品受众不大，解决方案也找不到，所以就记录一下，方便同僚参考

因为需要做一个范围选取功能，当然在选的上面还是可以实现的，关键问题是选了之后，我再次打开就没有了，也就是数据回显问题。开始想用它的selected打点功能，但是设置了之后和开始选择时候的样式冲突较大，别提风格统一了，兼职就是辣眼睛。

官方不提供方法，那就只能去他组件里面去看，通过查看发现他是在weeks对象中做了选中的操作，只要设置对象中的multiple属性为true就可以实现背景高亮选中，前后两个红色方框分别是beforeMultiple和afterMultiple。

代码伺候，在日历打开之后我们执行如下代码

this.$nextTick(()=>{
	//设置日历回显
	//this.calendarDataBegin && this.calendarDataAfter 这个是起始日期，得都有才是范围
	if(this.calendarDataBegin && this.calendarDataAfter){
		//获取日历的weeks对象，进行遍历
		const weeks = this.$refs.calendar.weeks
		for(let i in weeks){
			//遍历之后拿到数组，再进行遍历
			weeks[i].forEach((item)=>{
				//fullData是日历每一个小方块里面的日期
				if(item.fullDate!=undefined){
					//只要在我们的数据范围内都应该选中
					if(item.fullDate>=this.calendarDataBegin && item.fullDate<=this.calendarDataAfter){
						item.multiple = true
					}
					//前后两个分别设置一下，就会有红色背景效果
					if(item.fullDate==this.calendarDataBegin){
						item.beforeMultiple = true
					}
					if(item.fullDate==this.calendarDataAfter){
						item.afterMultiple = true
					}	
				}
			})
		}
	}
})

当然上面calendarDataBegin，calendarDataAfter是我自己的数据字段，对应是起始日期，其它都是通用代码。