bootstrap常用的时间插件罗列及对比

 本文转载至：http://classfoo.com/ccby/article/TZ79bVq#sec_CITmeKz

日期及时间作为极其重要的用户输入，在富 web 时代到处可见其身影。从强调功能到强调大小，再到重视体验，涌现了大量以 Bootstrap 为界面框架的日期/时间插件。

插件种类缤纷多样，有的接口配置丰富，有的简单而精致，面对如此之多的选择时，反而让人眼花缭乱。本文便是基于这样的原因，罗列并介绍其中数款最出名、且特点鲜明的插件。

注意！本文中的所有网址都来自对应插件的官方网站，可能需要代理才能访问。

• Bootstrap Datepicker（Stefan Petre）

  • Ethan 编辑于  04-22
  • 版本0
  • 评论0

   
  

  本文介绍的第一个插件便是 Stefan Petre 的 bootstrap-datepicker.js，可以说，bootstrap-datepicker.js 是最早实现的以表格形式展现的 web 日历选择器。其余类似风格的日期/时间插件其实都是 bootstrap-datepicker.js 的分枝或扩展。

  这是能找到的同类分格（表格日历）的日期/时间选择器中，最小的一个。如果您并不满意其提供的功能，可以尝试以下其它插件，但显然，大小方面都会有所增加。

  原创 支持日期 相对较小 功能简单 默认不支持中文 不支持时间 停止维护
  

  官方地址：http://www.eyecon.ro/bootstrap-datepicker/

  下载地址：http://www.eyecon.ro/bootstrap-datepicker/

  Demo ：http://www.eyecon.ro/bootstrap-datepicker/

• Bootstrap Datepicker（Andrew Rowls）

  • Ethan 编辑于  04-22
  • 版本0
  • 评论0

  
  

  
  

  
  

  Andrew Rowls 的 bootstrap-datepicker 便是上述 bootstrap-datepicker.js 最有名的分支。
  

  其对 bootstrap-datepicker.js 做了大量改进，且提供了更为详尽的文档。更可贵的是，它还提供了在线配置生成器。

  bootstrap-datepicker.js 2013 年底开始便不再维护，而本插件仍在活跃更新中。
  

  附：图 1 是在线配置生成器选项，图 2 是对应生成的代码片断，图 3 是最终执行效果。

  功能丰富 文档齐全 支持日期 支持中文 学习成本低 更新活跃 不支持时间
  

  官网：http://eternicode.github.io/bootstrap-datepicker/

  文档：http://bootstrap-datepicker.readthedocs.org/en/latest/

  Demo：http://eternicode.github.io/bootstrap-datepicker/

  开源地址：https://github.com/eternicode/bootstrap-datepicker

  社区：https://groups.google.com/group/bootstrap-datepicker/

• Bootstrap Datetimepicker（Sebastien MALOT）

  • Ethan 编辑于  04-22
  • 版本0
  • 评论0

  
  

  
  

  Bootstrap Datetimepicker 是 Andrew Rowls 的开源项目 Bootstrap Datepicker 的一个分支。前一章节中，我们已经对 Bootstrap Datepicker 作了简单的介绍，而 Bootstrap Datetimepicker 在其基础上主要新增了时间支持（Bootstrap Datepicker 只支持日期操作），这也是它的最大优势，使其成为目前最流行的日期/时间选择器插件。
  

  最流行 功能丰富 文档齐全 支持日期 支持时间 支持中文 学习成本低 更新活跃  时间编辑体验差

  官网：http://www.malot.fr/bootstrap-datetimepicker/

  Demo：http://www.malot.fr/bootstrap-datetimepicker/demo.php

  开源地址：https://github.com/smalot/bootstrap-datetimepicker

• Bootstrap Timepicker（jdewit）

  • Ethan 编辑于  04-22
  • 版本0
  • 评论0

  
  

  Bootstrap Timepicker 是一款简单精致的时间选择器插件。它支持直接输入、鼠标点击、键盘方向控制等方式来快速微调时间。

  与 Bootstrap Datepicker（Andrew Rowls）相反的是，它只支持时间选择，而不支持日期选择。而上述提到的 Bootstrap Datetimepicker（Sebastien MALOT）也同样支持时间选择，但刻度为 5 秒，且只能一页页找指定毫秒，体验较差。
  

  当然，如果要同时编辑日期及时间，可以整合 Bootstrap Datepicker 与 Bootstrap Timepicker，这样从体验上来说将会达到最佳效果，可以作为另一种解决方案（下面将要介绍的另一款插件已经帮我们完成该一步）。

  简单 体积小 支持时间 编辑体验好 不支持日期

  官网：http://jdewit.github.io/bootstrap-timepicker/

  Demo：http://jdewit.github.io/bootstrap-timepicker/

  开源地址：https://github.com/jdewit/bootstrap-timepicker

• Bootstrap Datetimepicker（Tarruda）

  • Ethan 编辑于  04-22
  • 版本0
  • 评论0

  
  

  
  

  Bootstrap Datetimepicker（Tarruda）基于 Bootstrap Datepicker（Stefan Petre）开发，同时集成了 Bootstrap Datepicker（Andrew Rowls）及 Bootstrap Timepicker（jdewit）的改进贡献。
  

  相比较 Bootstrap Datetimepicker（Sebastien MALOT），该款插件使用群体小，但它的时间编辑体验却好很多，未来肯定会更加流行。

  注意！Bootstrap Datetimepicker（Tarruda）本身文档是比较少的，但可以同时参考 Bootstrap Datepicker（Andrew Rowls）及 Bootstrap Timepicker（jdewit）的文档：
  http://bootstrap-datepicker.readthedocs.org/en/latest/
  http://jdewit.github.io/bootstrap-timepicker/index.html

  功能丰富 文档齐全 支持日期 支持时间 支持中文 学习成本低 更新活跃 编辑体验好
  

  官网：http://tarruda.github.io/bootstrap-datetimepicker/

  demo：http://tarruda.github.io/bootstrap-datetimepicker/

  开源地址：https://github.com/tarruda/bootstrap-datetimepicker

  其它文档帮助：http://bootstrap-datepicker.readthedocs.org/en/latest/ 、http://jdewit.github.io/bootstrap-timepicker/index.html

• ClockPicker（Wang Shenwei）

  • Ethan 编辑于  04-22
  • 版本0
  • 评论0

  
  

  基于 Bootstrap 的闹钟样式的时间选择器。

  新颖编辑体验好跨平台体验好 精度不够

  官网：http://weareoutman.github.io/clockpicker/

  Demo：http://weareoutman.github.io/clockpicker/

  开源地址：https://github.com/weareoutman/clockpicker

还有一款是daterangepicker也是一款不错的插件，myDate97 等