Limitaciones de fecha separadas del selector de fecha del elemento el-date-picker

elementUI viene con muchos componentes de selección de fecha, pero siempre hay algunas necesidades que no pueden satisfacer los desarrolladores. El requisito que encontré es que la hora de la actividad no se puede escribir en una sola pieza, como esta:

para esto, solo puedo usar dos componentes para juntarlos en una opción separada de "hora de inicio" y "hora de finalización", pero la hora de finalización y la hora de inicio La elección está sujeta a ciertas limitaciones. Por ejemplo: no se puede seleccionar la hora pasada y la hora de finalización debe ser mayor que la hora de inicio. Después de muchos intentos, elegí dos componentes el-date-picker para completar los requisitos y cumplir con el límite de tiempo. ¡No hay mucho que decir, código!

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

Diagrama de efectos realizados: cuando

no se selecciona la hora de finalización, la hora de inicio se puede seleccionar desde la hora actual hasta la actual. Después de seleccionar la hora de finalización, la hora de inicio solo se puede seleccionar desde la hora actual hasta la hora de finalización.

¡Hazlo! Este es el momento de la alabanza ... Gracias a todos.