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

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. — Emile Bergeron, Mar 09 '14 at 02:30

T J · Answer 1 · 2016-06-30T04:46:52.610

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 get the error 'old is not defined' when I try the method you describe to replace the Bootstrap with the jQuery. Any ideas? — gordon613, May 02 '18 at 14:43
@gordon613 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();` — T J, May 02 '18 at 16:43
@T J. Thanks. I opened a separate question https://stackoverflow.com/questions/50153428/using-jquerys-datepicker-with-bootstrap as I couldn't get what you suggested to work — gordon613, May 03 '18 at 11:00
@SizzlingCode Are you sure you're loading BS datepicker after jQuery UI datepicker? It should be present when this [line](https://github.com/uxsolutions/bootstrap-datepicker/blob/master/js/bootstrap-datepicker.js#L1641) executes — T J, Sep 26 '18 at 15:03

score 2 · Answer 2 · answered Sep 25 '19 at 06:33

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;

score 1 · Answer 3 · answered Sep 06 '18 at 14:22

1

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

answered Sep 06 '18 at 14:22

Michael Marin

11
1

Can you please explain how to get a custom script ? – Jobin Jul 16 '20 at 20:15
A bit late but for people who read this from now on, just go to https://jqueryui.com/download/ where you can uncheck the components you don't need. Simply hit download button down below. – caner Jul 24 '22 at 10:11

score 1 · Answer 4 · answered Mar 21 '19 at 16:14

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

score 0 · Answer 5 · edited May 23 '17 at 10:31

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.

score 0 · Answer 6 · answered May 07 '14 at 13:31

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.

What is this `value="date.format("yyyy-MM-dd")"`? It will not work. And will this answer prevent collisions? I think - no. — Bohdan Kuts, Jun 06 '18 at 13:03

score 0 · Answer 7 · answered Feb 08 '16 at 09:42

0

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

try this

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

answered Feb 08 '16 at 09:42

jabu.hlong

2,194
20
21

score 0 · Answer 8 · answered May 05 '20 at 11:11

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.

jQuery ui datepicker conflict with bootstrap datepicker

8 Answers8

Linked

Related