Uniapp小程序 时间段选择限制(开始日期 结束日期相互限制)

效果图:

1.  在这里我使用的是uview中的日期时间选择器,初始话的时候将可选的最小时间设置为当前时间的时间戳,并将开始时间的可选的最大时间初始化为10年后(方便之后做限制操作)

<!-- 日期选择-开始 -->
<u-datetime-picker ref="refStart" :show="showStrTimePic" :minDate="minStartTime" :maxDate="maxStartTime" v-model="startPicDate" @confirm="confirmStart" @cancel="cancelStart">
</u-datetime-picker>

<!-- 日期选择-结束 -->
<u-datetime-picker ref="refEnd" :show="showEndTimePic" :minDate="minEndTime" v-model="endPicDate" @confirm="confirmEnd" @cancel="cancelEnd">
</u-datetime-picker>

2. 在确定选择开始时间的时候 将结束时间可选的最小时间设置为所选开始时间的时间戳

// 确认选择开始日期
confirmStart(val) {
	this.startDate = this.DateFormatNumG(val.value, 'Y-M-D H:I')
	this.showStrTimePic = false
	this.minEndTime = val.value
}

3. 在确定选择结束时间的时候 将开始时间可选的最小时间设置为所选结束时间的时间戳

// 确认选择结束日期
confirmEnd(val) {
	this.endDate = this.DateFormatNumG(val.value, 'Y-M-D H:I')
	this.showEndTimePic = false
	this.maxStartTime = val.value
}