我想使用引导日期选择器显示两个月。在谷歌上搜索后，我无法找到如何使用引导日期选择器显示多个月。我发现我可以使用 JQuery UI 来显示多个月份。
但问题是：在我的应用程序中，他们使用的是引导日期选择器。当我尝试使用 JQuery UI datepicker 时，Bootstrap datepicker 会覆盖它，我无法看到 JQuery UI datepicker。
您能否建议如何将引导日期选择器替换为 JQuery UI？
【问题讨论】：
标签： jquery twitter-bootstrap jquery-ui jquery-ui-datepicker bootstrap-datepicker
这个问题可以使用bootstrap-datepicker的noConflict方法解决
$.fn.datepicker.noConflict = function(){
$.fn.datepicker = old;
return this;
};
您可以只使用 $.fn.datepicker.noConflict() 将引导日期选择器替换为存在的旧日期选择器，在本例中为 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>【讨论】：
$.fn.datepicker.noConflict();
在调用 Bootstrap datepicker 后放这一行
var _datepicker = jQuery.fn.datepicker;
在调用jQuery-ui JS之后
jQuery.fn.datepicker = _datepicker;
所以，你的电话看起来像
<script src="/bootstrap-datepicker.js" type="text/javascript"></script>
var _datepicker = jQuery.fn.datepicker;
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
jQuery.fn.datepicker = _datepicker;
【讨论】：
如果使用 datepicker，您可以毫无问题地同时使用 bootstrap 和 jQuery-UI。
至少我没有问题，但我有 jQuery-UI 工作，然后应用了引导程序。我推荐这种方法。
这里是多个月份的日期选择器的 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
});
});
如您所见，我使用类而不是 ID，因为在某些页面上我使用多个日期选择器。
【讨论】：
value="date.format("yyyy-MM-dd")"？不起作用。这个答案会防止碰撞吗？我认为 - 不。
我发现 jQueryUI 日历弹出窗口的 z-index 很低。
试试这个
#ui-datepicker-div{
z-index:350 !important;
}
【讨论】：
为了扩展 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
【讨论】：
这可能只适用于 Ruby on Rails……但我想你总是可以在其他地方尝试。我发现的一个更简单的解决方案是，由于 bootstrap-datepicker（带有 bootstrap-datepicker-rails）不依赖于 jquery-ui ...但仅依赖于 jquery ...您可以在 jquery-之前简单地加载它用户界面。
//= require jquery
//= require bootstrap-datepicker
//= require jquery-ui
这是一个使用 Rails 5.2 和 bootstrap-date-picker rails 的解决方案。它首先加载 bootstrap-datepicker 并忽略 jquery-ui 。所以你可以尝试在 jquery-ui.min.js 之前加载 bootstrap-datepicker.js。
【讨论】：