ElementUI 选择结束时间不能大于开始时间（可以选择同一天的时间段）

Posted 2021-06-30 是小橙鸭丶

让大家看看效果图，如下：

动态图如下：

template的模板下

<el-col :span="5">
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="startTime"
									type="datetime"
									placeholder="选择开始日期"
									format="yyyy/MM/dd HH:mm:ss"
									value-format="timestamp"
									:picker-options="pickerOptionsStart"
									@change="changeStart">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="endTime"
									type="datetime"
									placeholder="选择结束日期"
									format="yyyy/MM/dd HH:mm:ss"
									value-format="timestamp"
									:picker-options="pickerOptionsEnd"
									@change="changeEnd">
							</el-date-picker>
						</el-form-item>
</el-col>

vue中的代码：

data中的数据
pickerOptionsStart: {},
pickerOptionsEnd: {},
startTime: '', // 开始日期
endTime: '', // 结束日期

重点就是这两个change事件

changeStart() { // 限制开始时间
	console.log(this.startTime);
	this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
			disabledDate: (time) => {
				if (this.startTime) {
					return time.getTime() < this.startTime
				}
			}
	})	
},

changeEnd() { // 限制结束时间
	console.log(this.endTime);
	this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
	disabledDate: (time) => {
			if (this.endTime) {
				//如果没有后面的-8.64e7就是不可以选择今天的
				//减去一天的时间代表可以选择同一天; 1*24*60*60*1000;
				return time.getTime() > this.endTime-8.64e7 //-8.64e7可以让开始时间和结束时间选同一天
				}
		   }
	})			
},