2 Star 6 Fork 1

孙晓雪 / taro-picker

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

基于Taro实现的时间选择器

由于小程序中的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的使用方法

dateTime的使用:

dataTime参数是多个对象元素的数组,每个对象可支持如下参数选择:

  • mode: ['year', 'month', 'day', 'hour', 'minute', 'second']
  • unit: 界面中的日期标记,例如年,月,日,时,分,秒
  • start: 用于mode为year和day,可以指定过去的某一年/天,也可以指定将来的某一年/天
  • duration: 显示当前模式的最大数量,例如10年或30天
  • fields: 可指定当前模式中间隔固定时间间断进行显示,例如只显示10秒、20秒、30秒
  • format: 用于解决组合时间的格式化问题,例如X月X日,或者8:00
  • selected: 可指定当前模式下只选择有效范围内的哪几个元素,例如24小时内,只选择8点、12点、16点
  • humanity:目前只支持mode为day,可显示类似微信提醒的时间选择列表,如今天,明天 XX月XX日, XX月XX日 周X, 需搭配format: 'M月D日'使用。

dateTime举例:

  • {mode: 'year', unit: '年', start: '2020'},
  • {mode: 'month', unit: '月'},
  • { mode: 'day', duration: 30, unit: '日', humanity: true, format: 'M月D日' },
  • {mode: 'day', start: '21', duration: 30, unit: '日' },
  • { mode: 'hour', unit: ':00', format: 'H:s', selected: [8, 12, 16] },
  • { mode: 'hour', unit: '时' },
  • {mode: 'minute', fields: 10, unit: '分'},
  • {mode: 'second', fields: 30, unit: '秒'},

新版更新(2020-03-30):

将组件和format逻辑分开,同时支持更多的参数选择。

组件的使用

dateTime

传入需要显示的时间模式,具体请参考dateTime的使用

onConfirm()

点击确认时触发,传递参数为选择器当前选择的时间(dayjs格式)

onCancel()

点击取消时触发,可被父组件用于触发弹框隐藏之类的操作

onInitial()

组件加载时触发,通知父组件初始化时本组件的时间选择结果(由于初始化为当前时间可能为下一个时间周期例如使用fields、selected等参数,故本操作可把初始化时间直接传给父组件用于展示)

mode

指定onInitial和onConfirm时返回的日期格式,支持formatunixtoStringfromNow等等,具体请参考dayjs文档。

MIT License Copyright (c) 2020 Lovuey Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

微信小程序基于Taro 框架开发的日期时间选择器(date-time-picker),可实现类似微信提醒的功能 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/sunxiaoxue113/taro-picker.git
git@gitee.com:sunxiaoxue113/taro-picker.git
sunxiaoxue113
taro-picker
taro-picker
master

搜索帮助