关于uniapp uni-datetime-picker组件不能调整分钟数的问题(已解决)

最近在做一个与预约相关的系统,我又是才开始接触uniapp,真的是好多东西弄得我一头雾水。这个关于uni-datetime-picker组件不能调整分钟数的问题我在网络上找了好久都没有找到解决的办法,非常幸运的看到了这位老师的帖子,得以解决。【uniapp】uni-datetime-picker组件修改分钟选项为每15分钟的时间间隔 (0 15 30 45)_uniapp uni-datetime-picker-CSDN博客

因为组件更新有了一些新的调整 所以我重新整理了一个保姆级解决办法供大家参考

前提:我是在2024年3月直接通过插件市场导入的组件


以下是解决方案:

在目录 uni-datetime-picker 》components 》uni-datetime-picker中找到time-picker.vue文件

更改632行的getCurrentRange方法为

getCurrentRange(value) {
				const range = []
				if (value == 'minute') {
					for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i +=
						15) {
						range.push(i)
					}
				} else {
					for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
						range.push(i)
					}
				}
				return range
			},

这个时候我们是分钟数就已经是十五分钟一次了,但是因为我们的初始值是当前分钟数,所以我们还需要修改

在目录 uni-datetime-picker 》components 》uni-datetime-picker中找到util.js文件

更改371行的getTime方法为

function getTime(date, hideSecond) {
	date = fixIosDateFormat(date)
	date = new Date(date)
	const hour = date.getHours()
	const minute = 0
	const second = date.getSeconds()
	return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
}

这个时候我们的效果已经差不多完成了,还有一点小bug,就是他会跳到最后一项选项中去,我们还需要更改

在目录 uni-datetime-picker 》components 》uni-datetime-picker中找到time-picker.vue文件

更改288行hms的返回值为

return [this.hour - this.minHour]

最后附上效果图:


以上就是关于本问题的解决方案 如有不对 敬请指正 ૮ ºﻌºა

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值