项目选择时间范围有此需求 初次进入页面时默认选中一段时间范围,打开日历时默认时间范围变蓝
但是网上搜不到,所以只能自己改组件代码啦,防止影响其他页面使用,自己新加了字段来传输判断,不传这个字段就不会触发,且如果你有其他范围的传输,便不选择这个范围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的设置多选状态的方法里面:
获取全部日期时通过判断把小的时间放在前面,这样不管你怎么选择,默认的开始时间就是比较小的那个