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

问题描述

我使用由 eternicode(安德鲁·罗尔斯).

在 Bootstrap 2 上它可以工作，但现在它不适用于 Bootstrap 3 库.

如何让 bootstrap-datepicker 与 Bootstrap 3 一起使用代码>?

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

解决方案

我也使用 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="col-xs-8"><label class="control-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>

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 进行测试.请注意，这个 fork 比另一个更好用，因为它功能更丰富，具有本地化支持，并根据控件位置和窗口大小自动定位日期选择器，避免选择器离开屏幕，这是旧版本的问题版本.

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

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

How can I get bootstrap-datepicker to work with Bootstrap 3?

Note: The repository moved from eternicode to an organization account (uxsolutions).

解决方案

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.

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.

Here is my solution:

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

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

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

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

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

UPDATE

Using the newer code from http://eternicode.github.io/bootstrap-datepicker/ the changes are as follows:

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

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

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

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

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

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

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屋！