Github精选 – 适合移动端的HTML5 Datepicker

 2016-01-12 (updated: 2017-01-07) 15731

通过 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 非常相似；功能强大，能满足一般需求
• 不足: 暂无

m-date-picker截图

ios-datepicker

ios-datepicker 提供了 iOS 风格的日期选择方式，有上下滑动、左右滑动两种选择方式。

• 主页: https://github.com/otchenash/ios-datepicker
• Demo: http://demo.powerxing.com/html/datepicker/ios-datepicker/
• 推荐: ★★★☆☆
• 优点: 在手机上使用流畅，并且在 PC 端也支持良好
• 不足: 主页的文档不完善，缺乏相关的使用说明

ios-datepicker截图

mobipick

mobipick 基于 jQuery Mobile，提供了安卓风格的日期选择方式，通过点击 ‘+’、’-‘ 来选择日期。

• 主页: https://github.com/sustainablepace/mobipick
• Demo: http://mobipick.sustainablepace.net or http://demo.powerxing.com/html/datepicker/mobipick/
• 推荐: ★★★★☆
• 优点: 支持移动端、PC端，提供了丰富的 Demo。

mobipick截图

mobile508datepicker

mobile508datepicker 基于 jQuery Mobile，提供了安卓风格的日期选择方式，通过滑动来选择日期。

• 主页: https://github.com/jsdev/mobile508datepicker
• Demo: http://demo.powerxing.com/html/datepicker/mobile508datepicker/examples/demo1.html
• 推荐: ★★★☆☆
• 优点: 通过滑动的方式选择日期，体验会好一些
• 不足: 滑动效果不够流畅，不支持 PC 端

mobile508datepicker截图

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 自定义功能较弱

PikadayResponsive截图

文章很给力？微信扫一扫给作者打赏2元 :)
~感谢赞助者~

 http://www.powerxing.com/html5-datepicker/ 笔记Datepicker, HTML5

相关文章

1. HTML5调用手机的Datepicker(日期选择器)