jQuery ui datepicker 与 bootstrap datepicker 冲突
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22277563/
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
jQuery ui datepicker conflict with bootstrap datepicker
提问by ersat.ice37
I want to show two months using bootstrap datepicker. After search on google I am not able to find how to show multiple months using bootstrap datepicker. I found that I can use JQuery UI for displaying multiple months.
我想使用引导日期选择器显示两个月。在谷歌上搜索后，我无法找到如何使用引导程序日期选择器显示多个月份。我发现我可以使用 JQuery UI 来显示多个月份。
But problem is: In my application they are using bootstrap date picker. When I am trying to use JQuery UI datepicker then Bootstrap datepicker override it and I am not able to see JQuery UI datepicker.
但问题是：在我的应用程序中，他们使用引导日期选择器。当我尝试使用 JQuery UI datepicker 时，Bootstrap datepicker 覆盖它，我看不到 JQuery UI datepicker。
Could you please suggest how to replace bootstrap datepicker to JQuery UI?
您能否建议如何将引导程序日期选择器替换为 JQuery UI？
I wanted to achieve this: http://jqueryui.com/datepicker/#multiple-calendars
回答by T J
This issue can be solved using the noConflictmethod of bootstrap-datepicker
这个问题可以使用bootstrap-datepicker的noConflict方法解决
$.fn.datepicker.noConflict = function(){
$.fn.datepicker = old;
return this;
};
You can just do $.fn.datepicker.noConflict()which replaces the bootstrap datepicker with the older datepicker which was present, in this case jQuery UI.
您可以$.fn.datepicker.noConflict()将引导程序日期选择器替换为现有的旧日期选择器，在本例中为 jQuery UI。
For those who wants to keep both datepickers, you can do something along the following:
对于那些想要保留两个日期选择器的人，您可以执行以下操作：
if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
}
after which you'll be able to initialize jQuery UI datepicker using datepicker()method, and bootstrap one using bootstrapDP()
之后，您将能够使用datepicker()方法初始化 jQuery UI 日期选择器，并使用bootstrapDP()
Side note:Make sure you load bootstrap datepicker after jquery ui so that we can use it's noConflict()
旁注：确保在 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>回答by jabu.hlong
I found that z-index for the jQueryUI calender pop-up was low.
我发现 jQueryUI 日历弹出窗口的 z-index 很低。
try this
尝试这个
#ui-datepicker-div{
z-index:350 !important;
}
回答by Michael Marin
you can download a custom jquery-ui script, without to include datepicker module and to change the name of script from jquery-ui.min.js to jqueryuinodatepicker.min.js
您可以下载自定义 jquery-ui 脚本，而无需包含 datepicker 模块并将脚本名称从 jquery-ui.min.js 更改为 jqueryuinodatepicker.min.js
回答by Manjunath Bilwar
Bootstrap Datepicker conflict with jquery UI datepicker. f you want to use Bootstrap datepicker then try this
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
});
This works for me. I hope this will work for you as well :)
这对我有用。我希望这对你也有用:)
For more details: https://bootstrap-datepicker.readthedocs.io/en/master/#no-conflict-mode
更多详情：https: //bootstrap-datepicker.readthedocs.io/en/master/#no-conflict-mode
回答by kashyap chandarana
Just put this line after calling Bootstrap datepicker
只需在调用 Bootstrap datepicker 后放置这一行
var _datepicker = jQuery.fn.datepicker;
And after calling jQuery-ui JS
并且在调用 jQuery-ui JS 之后
jQuery.fn.datepicker = _datepicker;
So, your call will looks like
所以，你的电话看起来像
<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;
回答by mystic cola
This may only apply to Ruby on Rails... but I guess you could always try it elsewhere. A much, much easier solution that I found is that since bootstrap-datepicker (with bootstrap-datepicker-rails) doesn't rely on jquery-ui... but only relies on jquery... you can simply load it BEFORE jquery-ui.
这可能只适用于 Ruby on Rails ......但我想你总是可以在其他地方尝试。我发现的一个简单得多的解决方案是，由于 bootstrap-datepicker（使用 bootstrap-datepicker-rails）不依赖于 jquery-ui ......而只依赖于 jquery ......你可以简单地在 jquery 之前加载它-你好
//= require jquery
//= require bootstrap-datepicker
//= require jquery-ui
This was a solution for me with Rails 5.2 an bootstrap-date-picker rails. It loads bootstrap-datepicker first and ignores the jquery-ui one. So you could try just loading the bootstrap-datepicker.jsbefore jquery-ui.min.js.
这对我来说是一个使用 Rails 5.2 和 bootstrap-date-picker rails 的解决方案。它首先加载 bootstrap-datepicker 并忽略 jquery-ui 。所以你可以尝试在jquery-ui.min.js之前加载bootstrap -datepicker.js。
回答by Matthew Doyle
To expand on what vic said, the jQuery UI can be used with Bootstrap but it may not be worth the effort. See this post from SO:
为了扩展 vic 所说的内容，jQuery UI 可以与 Bootstrap 一起使用，但这可能不值得付出努力。从 SO 看到这篇文章：
Can I use Twitter Bootstrap and jQuery UI at the same time?
我可以同时使用 Twitter Bootstrap 和 jQuery UI 吗？
You may find that this datepicker has more options that could give you what you need... I don't see multiple calendars though: http://eternicode.github.io/bootstrap-datepicker/
你可能会发现这个日期选择器有更多的选项可以给你你需要的东西......虽然我没有看到多个日历：http: //eternicode.github.io/bootstrap-datepicker/
I would also consider that the jQuery UI look and feel may look out of place with the bootstrap look and feel, though that's just my opinion.
我还认为 jQuery UI 的外观和感觉可能与 bootstrap 的外观和感觉格格不入，尽管这只是我的意见。
回答by marcus
You can use bootstrap and jQuery-UI together with almost no issue if using the datepicker.
如果使用日期选择器，您可以将引导程序和 jQuery-UI 一起使用，几乎没有问题。
At least I had no issue, but I had jQuery-UI working and then applied bootstrap. I recommend that approach.
至少我没有问题，但我让 jQuery-UI 工作，然后应用了引导程序。我推荐这种方法。
Here is the jQuery-UI Implementation of datepicker with multiple months.
这是具有多个月份的 datepicker 的 jQuery-UI 实现。
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
Now here's my implementation of jQueryUI:
现在这是我对 jQueryUI 的实现：
HTML Element:
HTML 元素：
<input type="text" class="datepicker" value="date.format("yyyy-MM-dd")" name="date[@i]" />
JS:
JS：
$(function() {
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
numberOfMonths:2
});
});
As you can see I use class instead of ID because on some pages I use multiple date selectors.
如您所见，我使用类而不是 ID，因为在某些页面上我使用了多个日期选择器。
