1 问题
u-calendar日历控件存在的问题:
- 不能设置默认选中值,
 - 打开弹窗选择起始日期,然后点击取消按钮或蒙版关闭弹窗时,日历弹窗中的选中值发生改变(再次打开日历弹窗时,就可以看到选中值的错误)。
 
2 修改思路
针对以上两点,对于mode="range"的u-calendar做了如下修改来解决上述问题。
因为是npm引入的uView组件,不能在node_modules目录下修改组件内容。
所以只能将u-calendar组件复制到components目录下,改名为ln-calendar.vue,并修改组件内容。
2.1 设置默认选中值
首先在props中添加defaultDate属性:
defaultDate: {
	type: Array,
	default: () => []
}, 
其次,写一个设置默认值的方法:
//设置默认值,格式['2022-12-1','2023-8-2'],不带0
setDefaultDate(defaultDate) {
	if (defaultDate.length == 0) {
		return;
	}
	const startDateArr = defaultDate[0].split('-')
	this.startYear = Number(startDateArr[0])
	this.startMonth = Number(startDateArr[1])
	this.startDay = Number(startDateArr[2])
	this.startDate = this.activeDate = `${this.startYear}-${this.startMonth}-${this.startDay}`
	if (this.defaultDate.length > 1) {
		const endDateArr = defaultDate[1].split('-')
		this.endYear = Number(endDateArr[0])
		this.endMonth = Number(endDateArr[1])
		this.endDay = Number(endDateArr[2])
		this.endDate = `${this.endYear}-${this.endMonth}-${this.endDay}`
	}
}, 
最后在init()方法中调用setDefaultDate()方法即可。注意,调用时要放在changeData()方法之前。

2.2 修复取消选中时,弹窗内选中值不还原的问题
首先,在data中定义两个变量:
hasFix: false, //识别是否点击了确定按钮
beforeChangeVal: [] //存储原有选中值 
其次,在dateClick()方法顶部,存储确定按钮点击状态和原有选中值:
//保存原有值,点击取消或者蒙版关闭弹窗时,用于复原选中项
this.hasFix = false
if (this.endDate) {
	this.beforeChangeVal = [this.startDate, this.endDate]
} 
然后,在btnFix()方法顶部,设置确定按钮点击状态为true:
this.hasFix = true 
最后,在close() 方法中,修复问题。
if (!this.hasFix) {
  // 修复点击取消按钮或蒙版关闭弹窗时,日历弹窗的选中值发生改变的问题
  this.setDefaultDate(this.beforeChangeVal);
}
                
















