element的日期選擇器el-date-picker分開的日期約束

elementUI自帶了很多的日期選擇組件，但是總有一些需求是無法滿足我們這些開發者的。我遇到的需求是活動時間是不能夠寫在一塊的，像這種：

爲此我只能用兩個組件去拼湊成“開始時間“和”結束時間"分開選擇，但是結束時間和開始時間的選擇是有一定的約束限制的。比如：不能夠選擇過去的時間、結束時間需要大於開始時間。經過多次的嘗試，我選擇了兩個el-date-picker組件完成需求並且做到時間選擇的限制。話不多說，上代碼！

<el-date-picker 
	v-model="form.beginTime" 
	type="datetime" 
	placeholder="起始時間" 
	:picker-options="startDatePicker" 
	:disabled="isEdit" 
	@blur="blur0" 
	@focus="focus0"
/>
<span>至</span>
<el-date-picker 
	v-model="form.endTime" 
	type="datetime" 
	placeholder="結束時間" 
	:picker-options="endDatePicker"
	@blur="blur1" 
	@focus="focus1" 
/>

data(
return{
	startDatePicker: this.beginDate(),
	endDatePicker: this.processDate(),
	}
)
//這裏面有個小坑，在這之前我是直接寫方法，在data裏面是不可以互相取值的
//比如
data(
return{
	aa:9,
	b:this.aa+1//這句是報錯的，這裏獲取不到a變量
}
)
//所以上面直接用this.beginDate()方法來避免這個問題，這樣直接用方法返回時間選擇的限制，beginDate()方法就在methods上寫

//methods部分
beginDate() {
	const that = this;
	return {
		disabledDate(time) {
			if (that.form.endTime) {
				console.log(new Date(that.form.endTime).getTime())
				//如果結束時間不爲空，則小於結束時間
				return (
					time.getTime() > new Date(that.form.endTime).getTime() || time.getTime() <  new Date().getTime()
				);
			} else {
				return time.getTime() < new Date().getTime()
			}
		}
	}
},
processDate() {
	const that = this;
	return {
		disabledDate(time) {
			if (that.form.beginTime) {
				//如果開始時間不爲空，則結束時間大於開始時間
				return (
					time.getTime() < new Date(that.form.beginTime).getTime()
				);
			} else {
				return time.getTime() < new Date().getTime()//開始時間不選時，結束時間最大值小於等於當天
			}
		}
	}
},
disabledDate()方法是element的方法，它返回一個Boolean值，可以設置日期範圍的禁止選擇狀態

實現的效果圖：

結束時間未選時，開始時間可以選擇當前時間至今後，選擇結束時間後，開始時間只能選擇當前時間至結束時間期間的時間。

搞定！下面是求贊時間…謝謝各位大佬。