修改mx-datepicker组件,设置可以选择的日期范围
注:此处设置当前日期之后的可以选择,之前的则禁用
一、在props中定义一个变量enableRange,类型为一个数组。
![image-20210914152538126](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914152538126.png)
在调用mx-datepicker这个组件时传入enableRange即可
![image-20210914154018341](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914154018341.png)
![image-20210914154048093](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914154048093.png)
![image-20210914154118677](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914154118677.png)
![image-20210914154155775](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914154155775.png)
二、在处理日历的函数中加入判断条件,添加的代码如下
![image-20210914153053216](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914153053216.png)
![image-20210914153118023](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914153118023.png)
简易解释:给传入的enableRange的以外的item中日期项设置color为#ddd样式
compareDate(dateTime1, dateTime2) {
let formatDate1 = new Date(dateTime1);
let formatDate2 = new Date(dateTime2);
if (formatDate1 > formatDate2) {
return 1;
} else if (formatDate1 < formatDate2) {
return -1;
} else {
return 0;
}
},
compareYear(dateTime1, dateTime2) {
let year1 = new Date(dateTime1).getYear();
let year2 = new Date(dateTime2).getYear();
if (year1 > year2) {
return 1;
} else if (year1 < year2) {
return -1;
} else {
return 0;
}
}
该函数的完整代码如下
//处理日历
procCalendar(item) {
//如果起始日期大于该日期
//可用范围
let startresult = DateTools.compareDate(this.enableRange[0], item.dateObj) == -1 || DateTools.compareDate(
this.enableRange[0], item.dateObj) == 0;
let endresult = DateTools.compareDate(item.dateObj, this.enableRange[1]) == -1 || DateTools.compareDate(
item.dateObj, this.enableRange[1]) == 0;
if (startresult && endresult) {
item.disable = false;
} else {
item.disable = true;
}
//定义初始样式
/* item.statusStyle = {
opacity: 1,
color: item.isOtherMonth ? '#ddd' : '#000',
background: 'transparent'
}; */
//定义初始样式
item.statusStyle = {
opacity: 1,
color: item.disable ? '#ddd' : item.isOtherMonth ? '#abcfff' : '#000',
background: 'transparent'
};
item.bgStyle = {
type: '',
background: 'transparent'
};
item.dotStyle = {
opacity: 1,
background: 'transparent'
};
item.tips = "";
//标记今天的日期
if (DateTools.isSameDay(new Date(), item.dateObj)) {
item.statusStyle.color = this.color;
if (item.isOtherMonth) item.statusStyle.opacity = 0.3;
}
//标记选中项
this.checkeds.forEach(date => {
if (DateTools.isSameDay(date, item.dateObj)) {
item.statusStyle.background = this.color;
item.statusStyle.color = '#fff';
item.statusStyle.opacity = 1;
if (this.isMultiSelect && this.showTips) item.tips = this.beginText;
}
});
//节假日或今日的日期标点
if (item.statusStyle.background != this.color) {
let holiday = this.showHoliday ? DateTools.getHoliday(item.dateObj) : false;
if (holiday || DateTools.isSameDay(new Date(), item.dateObj)) {
item.title = holiday || item.title;
item.dotStyle.background = this.color;
if (item.isOtherMonth) item.dotStyle.opacity = 0.2;
}
} else {
item.title = item.dateObj.getDate();
}
//有两个日期
if (this.checkeds.length == 2) {
if (DateTools.isSameDay(this.checkeds[0], item.dateObj)) { //开始日期
item.bgStyle.type = 'bgbegin';
}
if (DateTools.isSameDay(this.checkeds[1], item.dateObj)) { //结束日期
if (this.isMultiSelect && this.showTips) item.tips = item.bgStyle.type ? this.beginText + ' / ' +
this.endText : this.endText;
if (!item.bgStyle.type) { //开始日期不等于结束日期
item.bgStyle.type = 'bgend';
} else {
item.bgStyle.type = '';
}
}
if (!item.bgStyle.type && (+item.dateObj > +this.checkeds[0] && +item.dateObj < +this.checkeds[
1])) { //中间的日期
item.bgStyle.type = 'bg';
item.statusStyle.color = this.color;
}
if (item.bgStyle.type) {
item.bgStyle.background = this.color;
item.dotStyle.opacity = 1;
item.statusStyle.opacity = 1;
}
}
},
三、在日期项的点击事件中加入判断,代码如下
![image-20210914153745743](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914153745743.png)
修改成功后的效果图如下:
![image-20210914153837758](https://xiang-ace.oss-cn-guangzhou.aliyuncs.com/img/image-20210914153837758.png)
注意:因为我当前的日期是9月14日,所以之前的日期禁用了,还有我给enableRange这个数组只传入了一个值,所以不会限制结束时间。当然这样可以直接吧enableRange设置为一个字符串类型,这里方便以后设置结束时间,就给设置成数组了。