最近在做一个与预约相关的系统,我又是才开始接触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]
最后附上效果图:
以上就是关于本问题的解决方案 如有不对 敬请指正 ૮ ºﻌºა