【ElementUI】DatePicker 日期选择器设置禁用日期范围

表单校验中，日期禁用场景最常见的就是起始与截止时间段选择时的校验。
校验形式有2种：
1.最后提交时
两个日期字段做大小比较，若不合法则通过弹窗反馈给用户，此方案用户需重新检视表单日期数据，并重新选择操作，体验欠佳；
2.在用户选择时
将选择范围直接帮用户划定好，更加直观地展示不可选日期范围，对用户来说更加友好。

效果如上图：
若我们将【截止日期】选为 2021.03.31，则【开始日期】便不能再选 3.31 及以后的日期。

实现步骤如下：

1. picker标签中，指定 picker-options 对应 data 中校验的变量 （Step1）
2. 将日期校验对象中【disabledDate】属性，指定具体判断方法，并返回（Step2）
3. methods中，完善日期判断逻辑（Step3）

Step1:

picker标签中，指定 picker-options 对应 data 中校验的变量

<template>
	...
	<!-- 活动起止时间 -->
	<el-form-item label="活动时间:">
		<el-date-picker
		        v-model="form.startTime"
		        type="datetime"
		        placeholder="开始时间"
		        align="right"
		        @change="handleStartTimeChange"
		        value-format="yyyy-MM-dd HH:mm:ss"
		        format="yyyy-MM-dd HH:mm:ss"
		        style="width: 200px"
		        :picker-options="pickerOptionsStart"
		        >
		</el-date-picker>
		至
		<el-date-picker
		        v-model="form.endTime"
		        type="datetime"
		        placeholder="截止时间"
		        align="right"
		        @change="handleEndTimeChange"
		        value-format="yyyy-MM-dd HH:mm:ss"
		        format="yyyy-MM-dd HH:mm:ss"
		        style="width: 200px"
		        :picker-options="pickerOptionsEnd"
		        >
		</el-date-picker>
	</el-form-item>
	...
</template>

Step2

将日期校验对象中【disabledDate】属性，指定具体判断方法，并返回

data() {
	return {
		...
		// 开始起始点禁用日期筛选
		pickerOptionsStart: {
		    disabledDate: (time) => {
		        return this.dealDisabledDateStart(time);
		    }
		},
		// 开始结束点禁用日期筛选
		pickerOptionsEnd: {
		    disabledDate: (time) => {
		        return this.dealDisabledDateEnd(time);
		    }
		},
		...
	}
}

Step3

methods中，完善日期判断逻辑

methods: {
	...
	// 开始时间不能晚于结束时间
	dealDisabledDateStart(time){
	    if(!this.form.endTime){
	        return false;
	    }
	    var times = new Date(this.form.endTime).getTime()
	    var sigledaytime = 24 * 60 * 60 * 1000; // 一天时间
	    var offset = time.getTime() % sigledaytime; // 当天选中时间余下时间
	    return times - time.getTime() - offset < 0;
	},
	// 截止时间不能早于开始时间
	dealDisabledDateEnd(time){
	    var times = new Date(this.form.startTime).getTime()
	    var sigledaytime = 24 * 60 * 60 * 1000; // 一天时间
	    var offset = time.getTime() % sigledaytime; // 当天选中时间余下时间
	    return time.getTime() - times + offset < 0;
	},
	...
}

以上。