如何获得bootstrap-datepicker来使用Bootstrap 3？

我使用由eternicode （Andrew Rowls）维护的bootstrap- datepicker版本。

在引导2上它工作，但现在它不能与Bootstrap 3库一起工作。

我怎样才能让bootstrap datepicker与Bootstrap 3一起工作？

Answer 1

我也使用Stefan Petre的http://www.eyecon.ro/bootstrap-datepicker ，而且不用修改Bootstrap 3。 请注意， http ://eternicode.github.io/bootstrap-datepicker/是Stefan Petre的代码的一个分支。

您必须更改标记（示例标记不起作用）才能在Bootstrap 3中使用新的CSS和表单网格布局。此外，您必须在实际的bootstrap-datepicker实现中修改一些CSS和JavaScript。

这是我的解决scheme：

 <div class="form-group row"> <div class="col-xs-8"> <label class="control-label">My Label</label> <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy"> <input class="form-control" type="text" readonly="" value="12-02-2012"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> </div> 

第176-177行的datepicker.css中的CSS更改：

 .input-group.date .input-group-addon i, .input-group.date .input-group-addon i { 

第34行的datepicker-bootstrap.js中的Javascript更改：

 this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false; 

UPDATE

使用http://eternicode.github.io/bootstrap-datepicker/中较新的代码，更改如下：;

第446-447行的datepicker.css中的CSS更改：

 .input-group.date .input-group-addon i, .input-group.date .input-group-addon i { 

第46行的datepicker-bootstrap.js中的Javascript更改：

  this.component = this.element.is('.date') ? this.element.find('.input-group-addon, .btn') : false; 

最后，启用datepicker的JavaScript（有一些选项）：

  $(".input-group.date").datepicker({ autoclose: true, todayHighlight: true }); 

使用Bootstrap 3.0和JQuery 1.9.1进行testing。 请注意，此叉比其他function更好用，因为它function更丰富，具有本地化支持，并根据控制位置和窗口大小自动定位dateselect器，避免select器脱离屏幕，这是旧的问题版。

Answer 2

对于遇到这个问题的其他人

这个插件的版本1.2.0（目前是这篇文章的版本）并不适用于Bootstrap 3.0的所有情况，但是它有一个小的解决方法。

具体而言，如果使用带有图标的input，则HTML标记当然会稍微不同，因为类名称已更改：

 <div class="input-group" data-datepicker="true"> <input name="date" type="text" class="form-control" /> <span class="input-group-addon"><i class="icon-calendar"></i></span> </div> 

看来正因为如此，你需要使用一个select器，直接指向input元素本身，而不是父容器（这是演示页面上自动生成的HTML所build议的）。

 $('*[data-datepicker="true"] input[type="text"]').datepicker({ todayBtn: true, orientation: "top left", autoclose: true, todayHighlight: true }); 

完成此操作后，您可能还需要添加一个监听器，用于单击/轻敲图标，以便单击时将焦点置于文本input上（这是默认情况下使用TB 2.x时的行为）。

 $(document).on('touch click', '*[data-datepicker="true"] .input-group-addon', function(e){ $('input[type="text"]', $(this).parent()).focus(); }); 

注意：我只是使用一个data-datepicker布尔属性，因为类名'datepicker'是由插件保留的，我已经使用'date'作为样式元素。