Ограничения выбора периода времени апплета Uniapp (время начала и время окончания взаимно ограничены)

Эффект реализации:

Здесь я использую селектор DatetimePicker из uview2.0, чтобы добиться эффекта ограничения времени начала и времени окончания. Далее давайте кратко рассмотрим реализованный код. Сначала посмотрим на инициализацию компонента селектора и соответствующие значения параметров.

<!-- 时间选择-开始 -->
<u-datetime-picker :show="showStartTime" v-model="transStartTime" mode="time"         
  :maxHour="maxHour" :maxMinute="maxMin" @change="transStartChange" 
  @confirm="confirmTransStart" @cancel="cancelTransStart">
</u-datetime-picker>

<!-- 时间选择-结束 -->
<u-datetime-picker :show="showEndTime" v-model="transEndTime" mode="time" 
  :minHour="minHour" :minMinute="minMin" @change="transEndChange" 
  @confirm="confirmTransEnd" @cancel="cancelTransEnd">
</u-datetime-picker>

maxHour: 23,
minHour: 0,
maxMin: 59,
minMin: 0,

Во-первых, необходимо установить ограничения на часы при подтверждении выбора времени начала или окончания. Поскольку невозможно подтвердить, совпадают ли часы, выбранные для времени начала и окончания, в настоящее время невозможно напрямую ограничить количество минут.

confirmTransStart(val) {
	this.pageData.startTime = val.value
	this.minHour = val.value.split(':')[0]
	this.showStartTime = false
}

confirmTransEnd(val) {
	this.pageData.endTime = val.value
	this.maxHour = val.value.split(':')[0]
	this.showEndTime = false
}

На данный момент мы успешно реализовали соответствующие ограничения на часы.Здесь нам нужно использовать событие изменения компонента.Далее посмотрим, как это реализовать.

transStartChange(val) {
	if (val.value.split(':')[0] == this.pageData.endTime.split(':')[0]) {
		this.maxMin = this.pageData.endTime.split(':')[1]
	} else {
		this.maxMin = 59
	}
}

transEndChange(val) {
	if (val.value.split(':')[0] == this.pageData.startTime.split(':')[0]) {
		this.minMin = this.pageData.startTime.split(':')[1]
	} else {
		this.minMin = 0
	}
}

 Теперь, когда реализуемая функция успешно завершена, если вы считаете, что она вам полезна, оставьте звездочку...