twitter-bootstrap - 如何让 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>

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/的更新代码，更改如下：

第 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（带有一些选项）：

 $(".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>

似乎正因为如此，您需要使用直接指向输入元素本身而不是父容器的选择器（这是演示页面上自动生成的 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”由插件保留，并且我已经使用“日期”来设置元素样式。