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

• 移动开发

实现效果：

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

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









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
}

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

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吧…

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/65b539e951.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐