关于uni-calendar选择时间范围时接受初始范围默认变蓝

项目选择时间范围有此需求  初次进入页面时默认选中一段时间范围,打开日历时默认时间范围变蓝

但是网上搜不到,所以只能自己改组件代码啦,防止影响其他页面使用,自己新加了字段来传输判断,不传这个字段就不会触发,且如果你有其他范围的传输,便不选择这个范围ok~

修改代码:

引用:import uniCalendar from "@/components/uni-calendar/uni-calendar.vue"

使用:<uni-calendar ref="calendar" :insert="false" :lunar="false" :range="true" :defaultRange="[startDate,endDate]" @confirm="confirm" ></uni-calendar>

startDate:"2020-08-04" //时间默认-或者/都可以

修改组件:

在uni-calendar.vue里面props加上:


在watch里面加上:


create加上:


在utils.js里面constructor里面加上:


utils.js加入此方法:


关于只选择一个时间仍然可以确定,另一个时间是undefined的问题:

确定的方法里面:


关于选择时间范围时开始时间大于结束时间没做判断的问题:

在utils.js的设置多选状态的方法里面:


获取全部日期时通过判断把小的时间放在前面,这样不管你怎么选择,默认的开始时间就是比较小的那个

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容