通过 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元 :)
~感谢赞助者~