Question

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

在Bootstrap 2上它可以工作，但现在它不能与Bootstrap 3库一起使用。

如何让bootstrap-datepicker与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;

<强>更新

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

CSS更改了第446-447行的datepicker.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>

因此，您需要使用一个直接指向输入元素的选择器 NOT 父容器（这是演示页面上自动生成的HTML所暗示的内容）。 / p>

$('*[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'作为样式元素。

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

2 个答案: