vue+el使用日期组件限制开始、结束日期选择范围

前言

记录一下最近使用element UI中的DatePicker，限制开始日期不能选择结束日期之后的日期，同样结束日期不能选择开始日期之前的日期。

具体实现

原理是利用DatePicker的:picker-options实现。

1. 标签添加:picker-options属性

<el-form-item label="开始日期" prop="startDate">
	 <el-date-picker
	 	ref="startDate"
	    v-model="qryTableDate.startDate"
	    :picker-options="pickerOptionsStart"
	    type="date"
	    format="yyyyMMdd"
	    value-format="yyyyMMdd">
</el-form-item>
<el-form-item label="结束日期" prop="endDate">
	 <el-date-picker
	 	ref="endDate"
	    v-model="qryTableDate.endDate"
	    :picker-options="pickerOptionsEnd"
	    type="date"
	    format="yyyyMMdd"
	    value-format="yyyyMMdd">
</el-form-item>

2. return中添加变量

data() {
	return {
		...
		pickerOptionStart: this.startDateFun(),
		pickerOptionEnd: this.endDateFun(),
		...
	}
}

3. methods中添加具体方法

startDateFun() {
	const self = this
	return {
		disabledDate(time) {
			let end = this.qryTableDate.endDate
			if(end) {
				end = end.substring(0,4) + '-' + end.substring(4,6) + '-' +end.substring(6,8)
				return time.getTime() > new Date(end).getTime()
			}
		}
	}
},
endDateFun() {
	const self = this
	return {
		disabledDate(time) {
			let start= this.qryTableDate.startDate
			if(start) {
				start= start.substring(0,4) + '-' + start.substring(4,6) + '-' +start.substring(6,8)
				return time.getTime() < new Date(end).getTime() - 24 * 60 * 60 * 1000
			}
		}
	}
},

后记

有两个地方需要注意，一个是时间格式如果是yyyyMMdd，需要转换成yyyy-MM-dd,因为new Date()不接收yyyyMMdd。另一个是结束日期要减一天，即24 * 60 * 60 * 1000，不然开始和结束日期不能选择同一天。