Github精选 – 适合移动端的HTML5 Datepicker
通过 HTML5 的 <input> 新属性可以简单方便地调用手机的原生 Datepicker,但功能较弱,定制性差。如果不要求调用手机原生的 Datepicker,目前 GitHub 上有不少优秀的基于 HTML5 开发的 Datepicker 可供选择,博主从 GitHub 中精选了几个优秀的作品供读者选择使用。
m-date-picker
m-date-picker 基于 React,提供了 iOS 风格的日期选择方式,与原生 Datepicker 非常相似。
- 主页: https://github.com/react-component/m-date-picker
- Demo: http://react-component.github.io/m-date-picker/examples/popup.html
- 推荐: ★★★★★
- 优点: 使用流畅,与原生 Datepicker 非常相似;功能强大,能满足一般需求
- 不足: 暂无
ios-datepicker
ios-datepicker 提供了 iOS 风格的日期选择方式,有上下滑动、左右滑动两种选择方式。
- 主页: https://github.com/otchenash/ios-datepicker
- Demo: http://demo.powerxing.com/html/datepicker/ios-datepicker/
- 推荐: ★★★☆☆
- 优点: 在手机上使用流畅,并且在 PC 端也支持良好
- 不足: 主页的文档不完善,缺乏相关的使用说明
mobipick
mobipick 基于 jQuery Mobile,提供了安卓风格的日期选择方式,通过点击 ‘+’、’-‘ 来选择日期。
- 主页: https://github.com/sustainablepace/mobipick
- Demo: http://mobipick.sustainablepace.net or http://demo.powerxing.com/html/datepicker/mobipick/
- 推荐: ★★★★☆
- 优点: 支持移动端、PC端,提供了丰富的 Demo。
mobile508datepicker
mobile508datepicker 基于 jQuery Mobile,提供了安卓风格的日期选择方式,通过滑动来选择日期。
- 主页: https://github.com/jsdev/mobile508datepicker
- Demo: http://demo.powerxing.com/html/datepicker/mobile508datepicker/examples/demo1.html
- 推荐: ★★★☆☆
- 优点: 通过滑动的方式选择日期,体验会好一些
- 不足: 滑动效果不够流畅,不支持 PC 端
PikadayResponsive
PikadayResponsive 移动端与 PC 端自适应的日期选择器,在移动端调用原生 Datepicker,而在 PC 端则调用 js 实现的日期选择器。
- 主页: https://github.com/mydea/PikadayResponsive
- Demo: https://mydea.github.io/PikadayResponsive/ or http://demo.powerxing.com/html/datepicker/PikadayResponsive/
- 推荐: ★★★☆☆
- 优点: 渐进式增强
- 不足: 原生 Datepicker 自定义功能较弱
文章很给力?微信扫一扫给作者打赏2元 :)
~感谢赞助者~