2 Unstar Star 1 Fork 0

孙晓雪 / taro-pickerMIT

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
微信小程序基于Taro 框架开发的日期时间选择器(date-time-picker),可实现类似微信提醒的功能 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

基于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文档。

Comments ( 0 )

Sign in for post a comment

1
https://gitee.com/sunxiaoxue113/taro-picker.git
git@gitee.com:sunxiaoxue113/taro-picker.git
sunxiaoxue113
taro-picker
taro-picker
master

Search

131423 f1aaba0b 1899542 094922 1c74bed3 1899542