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值，可以设置日期范围的禁止选择状态

实现的效果图：

结束时间未选时，开始时间可以选择当前时间至今后，选择结束时间后，开始时间只能选择当前时间至结束时间期间的时间。

搞定！下面是求赞时间…谢谢各位大佬。