Bootstrap-datepicker如何使用Bootstrap 3？ [英] How do I get bootstrap-datepicker to work with Bootstrap 3?

问题描述

我使用由引导日期标记的版本：//github.com/eternicoderel =nofollow noreferrer> eternicode （Andrew Rowls）。

I use the version of bootstrap-datepicker maintained by eternicode (Andrew Rowls).

在Bootstrap 2上有效，但现在它不支持Bootstrap 3库。

On Bootstrap 2 it worked, but now it doesn't work with the Bootstrap 3 library.

如何获取 bootstrap-datepicker 使用 Bootstrap 3 ？

推荐答案

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

I also use Stefan Petre’s http://www.eyecon.ro/bootstrap-datepicker and it does not work with Bootstrap 3 without modification. Note that http://eternicode.github.io/bootstrap-datepicker/ is a fork of Stefan Petre's code.

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

You have to change your markup (the sample markup will not work) to use the new CSS and form grid layout in Bootstrap 3. Also, you have to modify some CSS and JavaScript in the actual bootstrap-datepicker implementation.

这是我的解决方案：

<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更改：

CSS changes in datepicker.css on lines 176-177:

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

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

Javascript change in datepicker-bootstrap.js on line 34:

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

更新

使用 http://eternicode.github.io/bootstrap-datepicker/更改如下：

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

CSS changes in datepicker.css on lines 446-447:

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

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

Javascript change in datepicker-bootstrap.js on line 46:

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

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

Finally, the JavaScript to enable the datepicker (with some options):

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

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

Tested with Bootstrap 3.0 and JQuery 1.9.1. Note that this fork is better to use than the other as it is more feature rich, has localization support and auto-positions the datepicker based on the control position and window size, avoiding the picker going off the screen which was a problem with the older version.

这篇关于Bootstrap-datepicker如何使用Bootstrap 3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！