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

实现效果:

这里我使用的是uview2.0的DatetimePicker 选择器,实现开始时间与结束时间相互限制的效果,接下来简单看下实现的代码吧,首先看下选择器组件以及相关参数值的初始化

javascript 复制代码
<!-- 时间选择-开始 -->
<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,

首先就是在确认选择开始时间或结束时间的时候,分别对小时做出限制,因为不能确认开始、结束时间所选择的小时数是否一致,所以目前不能直接去对分钟数进行限制

javascript 复制代码
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
}

到这里已经成功对小时进行了相关限制,这里我们需要使用到组件的change事件,接下来看下具体怎么实现吧

javascript 复制代码
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
	}
}

现在已经成功完成了要实现的功能,感觉对自己有帮助的小伙伴,留个star吧...

相关推荐
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮1 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw51 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app