我想用bootstrap datepicker显示两个月。在谷歌搜索后,我无法找到如何使用bootstrap datepicker显示多个月。我发现我可以使用JQuery UI显示多个月。
但问题是:在我的应用程序中,他们使用引导日期选择器。当我尝试使用JQuery UI datepicker时,Bootstrap datepicker覆盖它,我无法看到JQuery UI datepicker。
你能否建议如何将引导程序datepicker替换为JQuery UI?
这个问题可以使用noConflict
的bootstrap-datepicker方法解决
$.fn.datepicker.noConflict = function(){
$.fn.datepicker = old;
return this;
};
你可以用$.fn.datepicker.noConflict()
替换bootstrap datepicker和旧的datepicker,在这种情况下是jQuery UI。
对于那些想要同时保留两个日期选择器的人,您可以执行以下操作:
if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
}
之后你将能够使用datepicker()
方法初始化jQuery UI datepicker,并使用bootstrapDP()
引导一个
旁注:确保在jquery ui之后加载bootstrap datepicker,以便我们可以使用它的noConflict()
$(function() {
if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
}
$("#jquery-ui-datepicker").datepicker({});
$('#bootstrap-datepicker').bootstrapDP({});
});
#left {
width: 50%;
float: left;
}
#bootstrap-datepicker {
width: 50%;
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
<div id="left">
<p>Date:
<input type="text" id="jquery-ui-datepicker">
</p>
</div>
<div id="bootstrap-datepicker" class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
我发现jQueryUI日历弹出窗口的z-index很低。
试试这个
#ui-datepicker-div{
z-index:350 !important;
}
如果使用datepicker,您可以使用bootstrap和jQuery-UI,几乎没有问题。
至少我没有问题,但我有jQuery-UI工作,然后应用bootstrap。我推荐这种方法。
以下是具有多个月的datepicker的jQuery-UI实现。
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
现在这是我的jQueryUI实现:
HTML元素:
<input type="text" class="datepicker" value="date.format("yyyy-MM-dd")" name="date[@i]" />
JS:
$(function() {
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
numberOfMonths:2
});
});
正如你所看到的,我使用的是class而不是ID,因为在某些页面上我使用了多个日期选择器。
为了扩展vic所说的,jQuery UI可以与Bootstrap一起使用,但它可能不值得付出努力。从SO看这篇文章:
Can I use Twitter Bootstrap and jQuery UI at the same time?
您可能会发现此日期选择器有更多选项可以为您提供所需的内容...我不会看到多个日历:http://eternicode.github.io/bootstrap-datepicker/
我还会认为jQuery UI的外观和感觉看起来可能与引导程序的外观和感觉不一致,尽管这只是我的看法。
您可以下载自定义jquery-ui脚本,不包括datepicker模块,并将脚本名称从jquery-ui.min.js更改为jqueryuinodatepicker.min.js
Bootstrap Datepicker与jquery UI datepicker冲突。如果你想使用Bootstrap datepicker然后尝试这个
var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality
// Call bootstrap datepicker function
$('#datepickermodel').bootstrapDP({
format: 'dd/mm/yyyy',
todayHighlight: true
});
这适合我。我希望这对你也有用:)
有关更多详细信息:https://bootstrap-datepicker.readthedocs.io/en/master/#no-conflict-mode