我使用的是由eternicode (Andrew Rowls)维护的bootstrap-datepicker版本。
在Bootstrap 2上它可以工作,但现在它不能与Bootstrap 3库一起工作。
如何让bootstrap-datepicker与Bootstrap 3
协同工作
注意:存储库已从eternicode移至组织帐户(uxsolutions)。
发布于 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,避免了旧版本的问题导致选择器离开屏幕。
发布于 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
复制相似问题