一开始没打算写这个功能实现,毕竟不是自己写的组件,而是去改uniapp的扩展组件. 但是确实在修改的时候上网查,没有查到关于这种功能实现的准确信息, 所以在功能完成后也写一份, 希望能给需要的人一个参考.

做项目遇到一个关于时间预约的功能
最开始给的需求是普通的时间选择器,因为是用uniapp接内置sqlite做的安卓软件,虽然说适配性不好,但是所幸是个单机小程序,也就无所谓了。
因为时间问题( 偷懒 ),所以直接使用了uniapp扩展组件里的uni-datetime-picker-popup组件(和uni-datetime-picker其实是一样的,时间选择的时候多了一个弹窗展示功能)
但是后来需求变了,要求时间选择分钟这个选项必须是十五分钟一选择,也就是选择时只有0,15,30,45这四个可选选项。
所以涉及到了改uni-datetime-picker-popup组件
我看了一下这个组件
在这里插入图片描述

它是三个小组件注入到本体中的,因为我不需要对日期选择做出更改,所以我直接看了time-picker 和 uni-datetime-picker这两个组件。
当然主要需要关注的是time-picker
其实一开始我考虑到的是这个对分钟时间间隔设置的方法是不是需要放在computed计算属性里面去控制,然后我看了一下计算属性和监听情况
监听只是对时间的变化进行了监听 以及监听了一下开始和结束时间 其他对我目前的需求来说没啥用
然后我看了计算属性
在这里插入图片描述

哦吼,很明显,这个方法getCurrentRange()是关键
当前页面搜一下getCurrentRange()
在这里插入图片描述

那这就好办了,通过计算属性得知getCurrentRange(value)里面的value是date类型,所以直接加if判断
在这里插入图片描述

因为我目前时间选择里面的初始值是根据实际时间来更新的,但0 15 30 45这个需求就要求我们不能这样写了,所以找到uni-datetime-picker-popup组件的parseDate(date)方法
minute初始值赋0
在这里插入图片描述
ok, 组件更改结束。

(PS: 注意一点的是,如果你改分钟的时间间隔为15分钟每次,记得看下time-picker组件里面的picker-view)
在这里插入图片描述
这个picker-view有个属性value,我为了处理这个value的问题处理了一下午,直到我看了官方文档才恍然大悟。
在这里插入图片描述
我的时间选择就是这个问题,选择后一直强制跑到最后一项选项中去了,因为没看文档,也是第一次遇到这个picker-view所以耽误了很多时间。
修改下value关联的值就行。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐