效果图:
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. 在确定选择开始时间的时候 将结束时间可选的最小时间设置为所选开始时间的时间戳文章来源:https://www.toymoban.com/news/detail-644900.html
// 确认选择开始日期
confirmStart(val) {
this.startDate = this.DateFormatNumG(val.value, 'Y-M-D H:I')
this.showStrTimePic = false
this.minEndTime = val.value
}
3. 在确定选择结束时间的时候 将开始时间可选的最小时间设置为所选结束时间的时间戳文章来源地址https://www.toymoban.com/news/detail-644900.html
// 确认选择结束日期
confirmEnd(val) {
this.endDate = this.DateFormatNumG(val.value, 'Y-M-D H:I')
this.showEndTimePic = false
this.maxStartTime = val.value
}
到了这里,关于Uniapp小程序 时间段选择限制(开始日期 结束日期相互限制)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!