修改mx-datepicker组件，设置可以选择的日期范围

修改mx-datepicker组件，设置可以选择的日期范围

注：此处设置当前日期之后的可以选择，之前的则禁用

一、在props中定义一个变量enableRange,类型为一个数组。

在调用mx-datepicker这个组件时传入enableRange即可

二、在处理日历的函数中加入判断条件，添加的代码如下

简易解释：给传入的enableRange的以外的item中日期项设置color为#ddd样式

此外：需要在DateTools中加入如下函数，不然会报错。

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;
					}
				}
			},

三、在日期项的点击事件中加入判断，代码如下

修改成功后的效果图如下：

注意：因为我当前的日期是9月14日，所以之前的日期禁用了，还有我给enableRange这个数组只传入了一个值，所以不会限制结束时间。当然这样可以直接吧enableRange设置为一个字符串类型，这里方便以后设置结束时间，就给设置成数组了。