如何让bootstrap-datepicker与Bootstrap 3一起使用？

Question

我使用由eternicode(Andrew Rowls)维护的bootstrap- datepicker版本.

在Bootstrap 2上它工作,但现在它不能与Bootstrap 3库一起使用.

我怎样才能获得自举日期选择器一起工作Bootstrap 3？

注意:存储库从eternicode移动到组织帐户(uxsolutions).

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.

这是我的解决方案:

<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;

最后,JavaScript启用datepicker(带有一些选项):

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

使用Bootstrap 3.0和JQuery 1.9.1进行测试.请注意,这个分叉比其他分叉更好,因为它功能更丰富,具有本地化支持并根据控件位置和窗口大小自动定位日期选择器,避免选择器离开屏幕,这是较旧的问题版.

Answer 2

对于遇到此问题的其他人......

这个插件的1.2.0版本(截至本文时的当前版本)在Bootstrap 3.0中记录的所有情况下并不完全有效,但它确实有一个小的解决方法.

具体来说,如果使用带有图标的输入,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>

看来因为这个,你需要使用一个直接指向input元素的选择器而不是父容器(这是演示页面上自动生成的HTML所暗示的).

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

完成此操作后,您可能还需要添加一个用于单击/点击图标的侦听器,以便在单击时将焦点设置为文本输入(这是默认情况下使用此插件时使用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'作为样式元素.