提示:当前为默认节点,你可以在后盾窜改为你想要的站点!
站长资源
中国站长网站

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日历插件范围选取填坑

评论 抢沙发

评论前务必登录!