由于小程序中的picker只支持date/time等类型的通用选择,而像“今天 10点 30分”这样的更加方便选择的格式需要自行定义,故本项目基于pickerView、pickerViewColumn来自定义了一个选择器用于日期和时间在用一个组件中选择完成。项目使用taro框架,也可实现类似微信提醒的时间选择器
大多数的时间选择不需要精确到分钟数的个位数字(例如23分),本项目可对当前的时间取到下一个十分(例如20分、30分),同时还支持从一个时间列表中选取某几个时间点:例如6点、12点、18点。
大多数的其他选择器没有调整好类似微信的确认和取消按钮,为了达到基本和微信的选择器体验一致,本项目也实现了确认和取消的按钮,并通过props和父组件交互
最新的版本组件利用了day.js来代替moment-mini,得益于day.js,将原来的75KB大小的日期处理库降为了2KB的大小。
组件利用了moment这个日期处理类库的部分特性来让代码更加简洁和稳定,为了保持小程序包的体积尽量小,组件import了moment-mini这个npm包,
当你调用onInitial和onConfirm时,可通过指定mode来获得返回时间的数据格式
可参考src/pages/index/index.jsx的使用方法
dataTime参数是多个对象元素的数组,每个对象可支持如下参数选择:
dateTime举例:
将组件和format逻辑分开,同时支持更多的参数选择。
传入需要显示的时间模式,具体请参考dateTime的使用
点击确认时触发,传递参数为选择器当前选择的时间(dayjs格式)
点击取消时触发,可被父组件用于触发弹框隐藏之类的操作
组件加载时触发,通知父组件初始化时本组件的时间选择结果(由于初始化为当前时间可能为下一个时间周期例如使用fields、selected等参数,故本操作可把初始化时间直接传给父组件用于展示)
指定onInitial和onConfirm时返回的日期格式,支持format、unix、toString、fromNow等等,具体请参考dayjs文档。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。