9.4　DateTime Picker

之前一直认为jQuery的datepicker插件是日期选择插件里最强大的，见过Bootstrap的这个DateTime Picker插件（官方网站为http://www.malot.fr/bootstrap-datetimepicker/）以后才发现，它和jQuery的插件一样强大，而且还能保持和Bootstrap一样的风格，（目前是2.x版本风格，以后就要支持新版3.x默认风格了）。

关于该插件的细节，我们不做过多的介绍，这里先列一下几个功能截图，如图9-15所示。

我们这里简单罗列一下该插件的使用方法，具体的细节请查看官方详细文档。

图9-15　时间和日期选择效果

1）绑定输入框，并设置format选项。示例如下：

<input type="text" value="2012-05-15 21:05" id="datetimepicker">
// JS代码
$('#datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd hh:ii'
});

2）绑定输入框，并设置format标记。示例如下：

<input type="text" value="2012-05-15 21:05" id="datetimepicker"
    data-date-format="yyyy-mm-dd hh:ii">
// JS代码
$('#datetimepicker').datetimepicker();

3）作为声明式组件使用时，示例如下：

<div class="input-append date" id="datetimepicker" data-date="12-02-2012"
     data-date-format="dd-mm-yyyy">
    <input size="16" type="text" value="12-02-2012" readonly>
    <span class="add-on"><i class="icon-th"></i></span>
</div>
// JS代码
$('#datetimepicker').datetimepicker();

4）作为声明式组件使用时，示例如下：

<div id="datetimepicker"></div>
// JS代码
$('#datetimepicker').datetimepicker();

它几乎和jQuery的datepicker插件一模一样，非常好用。另外，该插件还支持国际化，但是需要按照固定的格式提供国际化的翻译内容才行，具体步骤请阅读官方文档。