jQuery ui datepicker conflict with bootstrap datepicker

Question

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

Sycophancy

If possible, provide a minimal code part that you have right now and that needs to be changed. Show us what you've already tried. – Heatherheatherly

Answer 1

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>

Pep

I get the error 'old is not defined' when I try the method you describe to replace the Bootstrap with the jQuery. Any ideas? – Gerald

@Gerald that code is just an extract from bootstrap source. If you only want to use jQuery UI datepicker you should be good by just calling it $.fn.datepicker.noConflict(); – Pep

@T J. Thanks. I opened a separate question #50153928 as I couldn't get what you suggested to work – Gerald

old is not defined :( – Lollard

@SizzlingCode Are you sure you're loading BS datepicker after jQuery UI datepicker? It should be present when this line executes – Pep

Answer 2

Just put this line after calling Bootstrap datepicker

var _datepicker = jQuery.fn.datepicker;

And after calling 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;

Vashtee

Answer 3

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

Castra

Can you please explain how to get a custom script ? – Francoisefrancolin

A bit late but for people who read this from now on, just go to jqueryui.com/download where you can uncheck the components you don't need. Simply hit download button down below. – Papilionaceous

Answer 4

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

Oxheart

Answer 5

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.

Discernible

Answer 6

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.

Beaudette

What is this value="date.format("yyyy-MM-dd")"? It will not work. And will this answer prevent collisions? I think - no. – Blanks

Answer 7

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

try this

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

Bronnie

Answer 8

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.

//= 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.js before jquery-ui.min.js.

Choanocyte