twitter-bootstrap 如何让 bootstrap-datepicker 与 Bootstrap 3 一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18887950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get bootstrap-datepicker to work with Bootstrap 3?
提问by user2167526
I use the version of bootstrap-datepickermaintained by eternicode(Andrew Rowls).
我使用由eternicode(Andrew Rowls)维护的bootstrap- datepicker版本。
On Bootstrap 2 it worked, but now it doesn't work with the Bootstrap 3 library.
在 Bootstrap 2 上它有效，但现在它不适用于 Bootstrap 3 库。
How can I get bootstrap-datepickerto work with Bootstrap 3?
如何让bootstrap-datepicker使用Bootstrap 3？
Note:The repository moved from eternicodeto an organization account (uxsolutions).
注意：存储库从eternicode移动到组织帐户 (uxsolutions)。
回答by Shane
I also use Stefan Petre's http://www.eyecon.ro/bootstrap-datepickerand 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.
我也使用 Stefan Petre 的http://www.eyecon.ro/bootstrap-datepicker并且它在不修改的情况下不适用于 Bootstrap 3。请注意，http://eternicode.github.io/bootstrap-datepicker/ 是 Stefan Petre 代码的一个分支。
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.
您必须更改标记（示例标记将不起作用）才能在 Bootstrap 3 中使用新的 CSS 和表单网格布局。此外，您必须在实际的 bootstrap-datepicker 实现中修改一些 CSS 和 JavaScript。
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:
datepicker.css 第 176-177 行中的 CSS 更改：
.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {
Javascript change in datepicker-bootstrap.js on line 34:
第 34 行 datepicker-bootstrap.js 中的 Javascript 更改：
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:
使用来自http://eternicode.github.io/bootstrap-datepicker/的较新代码，更改如下：
CSS changes in datepicker.css on lines 446-447:
第 446-447 行 datepicker.css 中的 CSS 更改：
.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {
Javascript change in datepicker-bootstrap.js on line 46:
第 46 行 datepicker-bootstrap.js 中的 Javascript 更改：
this.component = this.element.is('.date') ? this.element.find('.input-group-addon, .btn') : false;
Finally, the JavaScript to enable the datepicker (with some options):
最后，启用日期选择器的 JavaScript（带有一些选项）：
$(".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 3.0 和 JQuery 1.9.1 进行测试。请注意，这个 fork 比另一个更好用，因为它功能更丰富，具有本地化支持，并根据控件位置和窗口大小自动定位日期选择器，避免选择器离开屏幕，这是旧版本的问题版本。
回答by Iain Collins
For anyone else who runs into this...
对于遇到此问题的其他任何人...
Version 1.2.0 of this plugin (current as of this post) doesn't quite work in all cases as documented with Bootstrap 3.0, but it does with a minor workaround.
该插件的 1.2.0 版（本文发布时的最新版本）在 Bootstrap 3.0 中记录的所有情况下都不能正常工作，但它有一个小的解决方法。
Specifically, if using an input with icon, the HTML markup is of course slightly different as class names have changed:
具体来说，如果使用带图标的输入，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>
It seems because of this, you need to use a selector that points directly to the input element itself NOTthe parent container (which is what the auto generated HTML on the demo page suggests).
似乎因此，您需要使用一个直接指向输入元素本身而不是父容器的选择器（这是演示页面上自动生成的 HTML 所建议的）。
$('*[data-datepicker="true"] input[type="text"]').datepicker({
todayBtn: true,
orientation: "top left",
autoclose: true,
todayHighlight: true
});
Having done this you will probably also want to add a listener for clicking/tapping on the icon so it sets focus on the text input when clicked (which is the behaviour when using this plugin with TB 2.x by default).
完成此操作后，您可能还想添加一个用于单击/点击图标的侦听器，以便在单击时将焦点设置在文本输入上（这是默认情况下将此插件与 TB 2.x 一起使用时的行为）。
$(document).on('touch click', '*[data-datepicker="true"] .input-group-addon', function(e){
$('input[type="text"]', $(this).parent()).focus();
});
NB: I just use a data-datepicker boolean attribute because the class name 'datepicker' is reserved by the plugin and I already use 'date' for styling elements.
注意：我只使用 data-datepicker 布尔属性，因为插件保留了类名“datepicker”，并且我已经将“date”用于样式元素。
