vue element-ui 时间段选择限制

有个需求就是需要选择一段时间（10天内） 起始时间不能超过当前时间，最多选择10天

代码如下：

<el-date-picker
	@change="startTimeChange"
	v-model="formData.startDate"
	:picker-options="startDateTimePickerOptions()"
	:default-time="moment().format('HH:mm:ss')"
	type="datetime"
	placeholder="开始时间"
>
</el-date-picker>

<el-date-picker
	@change="startTimeChange"
	v-model="formData.startDate"
	:picker-options="startDateTimePickerOptions()"
	:default-time="moment().format('HH:mm:ss')"
	type="datetime"
	placeholder="开始时间"
>
</el-date-picker>

data(){
	return {
		startDate: Date.now(),
		startSelectableRange: "00:00:00 - 23:59:59",
		endSelectableRange: "00:00:00 - 23:59:59",
	}
},
methods:{

	startTimeChange(date){
		this.stateDate = new Date(date);
		if(moment().valueOf() >= moment(new Date(date)).valueOf()){
			// 开始时间至少比当前时间多10分钟
			this.formData.startDate = moment(date).add(10,"minutes").format("YYYY-MM-DD HH:mmm;ss")
		}else{
			this.formData.startDate = moment(date).format("YYYY-MM-DD HH:mmm;ss")
		}
	},
	endTimeChange(date){
		if(moment().valueOf() >= moment(new Date(date)).valueOf()){
			// 开始时间至少比当前时间多20分钟
			this.formData.startDate = moment(date).add(20,"minutes").format("YYYY-MM-DD HH:mmm;ss")
		}else if(moment(this.formData.startDate).valueOf() >= moment(new Date(date)).valueOf()){
			this.formData.startDate = moment(this.formData.startDate).add(10,"minutes").format("YYYY-MM-DD HH:mmm;ss")
		}else{
			this.formData.startDate = moment(date).format("YYYY-MM-DD HH:mmm;ss")
		}
	},
	startDateTimePickerOptions(){
		let date = this.formDate.endDate;
		let startSelectableRange = this.startSelectableRange;
		return {
			disabledDate(time){
				if(date){
					return time.getTime() < Date.now()-8.64e7 || time.getTime() > new Date(date).getTime()
				}else{
					return time.getTime() < Date.now()
				}
			}	
		},
		selectableRange: startSelectableRange 
	},
	endDateTimePickerOptions(){
		let date = this.startDate;
		let endSelectableRange = this.endSelectableRange;
		return {
			disabledDate(time){
				return time.getTime() < date.getTime()-8.64e7 || time.getTime() > date.getTime() + 10*24*60*60*1000
			}	
		},
		selectableRange: endSelectableRange 
	}

},
watch:{
	"formDate.startDate": {
		deep:true,
		handler(newValue,oldValue){
			if(newValue){
				let st = "";
				if(moment(newValue).format("YYYY-MM-DD") === moment().format("YYYY-MM-DD")){
					sr = moment().add(10,"minutes").format("HH:mm:ss")
				} else {
					st = "00：00：00"
				}
				this.startSelectableRange = st + " - 23:59:59";
			}
		}
	},
	"formDate.endDate": {
		deep:true,
		handler(newValue,oldValue){
			if(newValue){
				let st = "";
				if(moment(newValue).format("YYYY-MM-DD") === moment().add(10,"minutes").format("YYYY-MM-DD")){
					st = moment().format("HH:mm:ss")
					this.startSelectableRange = "00:00:00 - " + st;
				} else if((moment(newValue).format("YYYY-MM-DD") === moment().format("YYYY-MM-DD") || (moment(newValue).format("YYYY-MM-DD") === moment(this.formData.startDate).format("YYYY-MM-DD")){
					st = moment().add(10,"minutes").format("HH:mm:ss")
					this.startSelectableRange = st + " - 23:59:59";
				} else {
					st = "23:59:59";
					this.startSelectableRange = "00:00:00 - " + st;
				}
			}
		}
	}
}