如何让bootstrap-datepicker与Bootstrap 3一起工作？
我使用的是由eternicode (Andrew Rowls)维护的bootstrap-datepicker版本。
在Bootstrap 2上它可以工作，但现在它不能与Bootstrap 3库一起工作。
如何让bootstrap-datepicker与Bootstrap 3协同工作
注意：存储库已从eternicode移至组织帐户(uxsolutions)。
回答 2
Stack Overflow用户
发布于 2013-10-09 23:11:21
我也使用Stefan Petre的http://www.eyecon.ro/bootstrap-datepicker，如果没有修改，它不能在Bootstrap 3上工作。请注意，http://eternicode.github.io/bootstrap-datepicker/是Stefan Petre的代码的分支。
以下是我的解决方案：
<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进行测试。请注意，这个分支比其他分支更易于使用，因为它的功能更丰富，具有本地化支持，并根据控件位置和窗口大小自动定位datepicker，避免了旧版本的问题导致选择器离开屏幕。
Stack Overflow用户
发布于 2013-10-15 07:40:14
对于遇到这种情况的任何人来说...
这个插件的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>似乎正因为如此，您需要使用一个直接指向输入元素本身的选择器，而不是父容器(这是演示页面上自动生成的所建议的)。
$('*[data-datepicker="true"] input[type="text"]').datepicker({
todayBtn: true,
orientation: "top left",
autoclose: true,
todayHighlight: true
});完成此操作后，您可能还想添加一个用于单击/点击图标的侦听器，以便在单击时将焦点设置在文本输入上(这是在TB2.x中使用此插件时的默认行为)。
$(document).on('touch click', '*[data-datepicker="true"] .input-group-addon', function(e){
$('input[type="text"]', $(this).parent()).focus();
});注意:我只使用了一个data-datepicker boolean属性，因为类名称'datepicker‘是由插件保留的，并且我已经使用了'date’来设置元素的样式。
https://stackoverflow.com/questions/18887950
复制相似问题