1、在props中新增defaultStartDate、defaultEndDate属性
//默认开始日期defaultStartDate:{type: String,default: ''},//默认结束日期defaultEndDate:{type: String,default: ''}
2、新增setDate函数
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}`}}
3、修改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);}},
由于我传的defaultStartDate、defaultEndDate中，月、日带有前导0，所以需要新增formatNumReverse函数格式化数字
4、新增formatNumReverse函数
//反向格式化数字formatNumReverse: function(num) {return num > 10 ? num : parseInt(num);},
5、最后在父组件添加default-start-date、default-end-date
:default-start-date="start_date" :default-end-date="end_date"//start_date: '-09-26'//end_date: '-09-27'
6、在部分情况下直接设置default-start-date、default-end-date会无效，可以在nexTick中调用setDate函数设置
<u-calendar v-model="showDate" ref="calendar" :mode="range" @change="changeDate" :default-start-date="start_date" :default-end-date="end_date"/>this.$nextTick(() => {this.$refs.calendar.setDate(this.start_date, this.end_date)})
