jQuery ui datepicker与bootstrap datepicker发生冲突

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.

我想用bootstrap datepicker显示两个月。在谷歌搜索后，我无法找到如何使用bootstrap datepicker显示多个月。我发现我可以使用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?

您能否建议如何将引导程序datepicker替换为JQuery UI？

I wanted to achieve this: http://jqueryui.com/datepicker/#multiple-calendars

我想实现这个目标：http：//jqueryui.com/datepicker/#multiple-calendars

4 个解决方案

#1

This issue can be solved using the noConflict method 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 datepicker，并使用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>

#2

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;
}

#3

You can use bootstrap and jQuery-UI together with almost no issue if using the datepicker.

如果使用datepicker，您可以使用bootstrap和jQuery-UI，几乎没有问题。

At least I had no issue, but I had jQuery-UI working and then applied bootstrap. I recommend that approach.

至少我没有问题，但我有jQuery-UI工作，然后应用bootstrap。我推荐这种方法。

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，因为在某些页面上我使用多个日期选择器。

#4

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的外观和感觉可能看起来与引导程序的外观和感觉不一致，尽管这只是我的看法。

#1