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

Question

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

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

datepicker.css 第 176-177 行的 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/ 的新代码，更改如下：

datepicker.css 第 446-447 行的 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（带有一些选项）：

 $(".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 所暗示的）。

$('*[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' 来设置元素样式。