站长资源
中国站长网站

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

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是我自己的数据字段,对应是起始日期,其它都是通用代码。

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » uni-app日历插件范围选取填坑

评论 抢沙发

评论前必须登录!