1.日期范围默认选中:
该组件未提供默认选择日期范围,需对组件进行修改,步骤如下:
1)在 uni-calendar 文件下找到 uni-calendar.vue 文件, props 中增加:
defaultRange: {
type: Array,
default () {
return []
}
},
watch 方法中增加:
defaultRange(newVal) {
this.cale.setDefaultChoose(this.nowDate.fullDate, newVal)
this.weeks = this.cale.weeks
}
created 方法 new Calendar 中增加:
defaultRange: this.defaultRange
2)在 uni-calendar 文件下找到 util.js 文件, constructor 中增加:
// 默认日期范围
if(defaultRange.length > 0 && this.multipleStatus.data.length == 0) {
this.multipleStatus.before = defaultRange[0]
this.multipleStatus.after = defaultRange[1]
this.multipleStatus.data = this.geDateAll(defaultRange[0], defaultRange[1])
}
并增加方法 setDefaultChoose:
// 设置默认选中
setDefaultChoose(data, value) {
if(value > 0) {
this.multipleStatus.before = value[0]
this.multipleStatus.after = value[1]
this.multipleStatus.data = this.geDateAll(value[0],value[1])
}
this._getWeek(data)
}
2.存在日期范围后点击第一下、第二下选中为下一日期范围:
该组件默认的是选择日期范围之后,点击第一下取消所选择的日期范围,点击第二下、第三下才完成选中下一日期范围,先优化减少用户操作,点击第一下、第二下即可完成下一日期范围的选中。
在 uni-calendar 文件下找到 util.js 文件,并找到 setMultiple 方法,增加代码即可:
this.multipleStatus.before = fullDate