修改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設定為一個字串型別，這裡方便以後設定結束時間，就給設定成陣列了。