- 找到uview对应的包,找到
- 在这个文件中找到props中新增defaultStartDate、defaultEndDate属性
//默认开始日期
defaultStartDate:{
type: String,
default: ''
},
//默认结束日期
defaultEndDate:{
type: String,
default: ''
}
3.新增setDate,formatNumReverse函数
setDate(startDate, endDate = null) {
const defaultStartDateArr = startDate.split('-')
this.startYear = defaultStartDateArr[0]
this.startMonth = this.formatNumReverse(defaultStartDateArr[1])
this.startDay = this.formatNumReverse(defaultStartDateArr[2])
this.startDate = this.activeDate = `${this.startYear}-${this.startMonth}-${this.startDay}`
if (endDate) {
const defaultEndDateArr = endDate.split('-')
this.endYear = defaultEndDateArr[0]
this.endMonth = this.formatNumReverse(defaultEndDateArr[1])
this.endDay = this.formatNumReverse(defaultEndDateArr[2])
this.endDate = `${this.endYear}-${this.endMonth}-${this.endDay}`
}
}
//反向格式化数字
formatNumReverse(num) {
return num > 10 ? num : parseInt(num);
},
4.修改changeData方法
changeData() {
this.days = this.getMonthDay(this.year, this.month);
this.daysArr=this.generateArray(1,this.days)
this.weekday = this.getWeekday(this.year, this.month);
this.weekdayArr=this.generateArray(1,this.weekday)
this.showTitle = `${this.year}年${this.month}月`;
//修复跨月问题
if (this.defaultStartDate && !this.startDate && !this.endDate) this.setDate(this.defaultStartDate, this.defaultEndDate)
if (this.isChange && this.mode == 'date') {
this.btnFix(true);
}
},
5.此时已经修改好了,只需要在你调用组件的时候加入
<u-calendar @change="filterDateChange" ref="calendar" :default-start-date="filterDate.start_date"
:default-end-date="filterDate.end_date" safe-area-inset-bottom v-model="calendarShow" mode="range">
</u-calendar>