jQuery ui datepicker conflict with 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.

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.

Could you please suggest how to replace bootstrap datepicker to JQuery UI?

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

This issue can be solved using the noConflict method of bootstrap-datepicker

$.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.

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()

Side note: Make sure you load bootstrap datepicker after jquery ui so that we can use it's 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>

I found that z-index for the jQueryUI calender pop-up was low.

try this

#ui-datepicker-div{
z-index:350 !important;
}

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

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

Here is the jQuery-UI Implementation of datepicker with multiple months.

      $(function() {
          $( "#datepicker" ).datepicker({
          numberOfMonths: 3,
          showButtonPanel: true
          });
       });

Now here's my implementation of jQueryUI:

HTML Element:

            <input type="text" class="datepicker" value="date.format("yyyy-MM-dd")" name="date[@i]" />

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.

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:

Can I use Twitter Bootstrap and jQuery UI at the same time?

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/

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.

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

Bootstrap Datepicker conflict with jquery UI datepicker. f you want to use Bootstrap datepicker then try this

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://stackoverflow.com/questions/22277563/jquery-ui-datepicker-conflict-with-bootstrap-datepicker

标签

jquery

twitter-bootstrap

jquery-ui

jquery-ui-datepicker

bootstrap-datepicker