jQuery ui datepicker конфликтует с bootstrap datepicker

Эту проблему можно решить с помощью noConflict метод bootstrap-datepicker

$.fn.datepicker.noConflict = function(){
   $.fn.datepicker = old;
   return this;
};

Вы можете просто сделать $.fn.datepicker.noConflict(), который заменяет средство выбора даты начальной загрузки более старым средством выбора даты, которое присутствовало, в данном случае пользовательским интерфейсом jQuery.

Для тех, кто хочет сохранить оба средства выбора даты, вы можете сделать следующее:

if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
   var datepicker = $.fn.datepicker.noConflict();
   $.fn.bootstrapDP = datepicker;
}

после чего вы сможете инициализировать средство выбора даты пользовательского интерфейса jQuery с помощью метода datepicker() и загрузить его с помощью bootstrapDP()

Примечание. Убедитесь, что вы загружаете средство выбора даты начальной загрузки после пользовательского интерфейса jquery, чтобы мы могли использовать его 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>

Вы можете использовать bootstrap и jQuery-UI вместе практически без проблем, если используете средство выбора даты.

По крайней мере, у меня не было проблем, но у меня работал jQuery-UI, а затем применялся бутстрап. Я рекомендую такой подход.

Вот реализация jQuery-UI средства выбора даты с несколькими месяцами.

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

Теперь вот моя реализация jQueryUI:

HTML-элемент:

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

JS:

    $(function() {
        $(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd',
            numberOfMonths:2
        });
    });

Как видите, я использую класс вместо идентификатора, потому что на некоторых страницах я использую несколько селекторов даты.

Я обнаружил, что z-индекс для всплывающего окна календаря jQueryUI был низким.

попробуй это

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

Чтобы расширить то, что сказал Вик, пользовательский интерфейс jQuery можно использовать с Bootstrap, но это может не стоить усилий. Смотрите этот пост от SO:

Могу ли я использовать Twitter Bootstrap и jQuery UI одновременно?

Вы можете обнаружить, что у этого средства выбора даты есть больше опций, которые могут дать вам то, что вам нужно... Однако я не вижу нескольких календарей: http://eternicode.github.io/bootstrap-datepicker/

Я также считаю, что внешний вид пользовательского интерфейса jQuery может выглядеть неуместно с внешним видом начальной загрузки, хотя это только мое мнение.

вы можете загрузить собственный скрипт jquery-ui, не включая модуль datepicker и не меняя имя скрипта с jquery-ui.min.js на jqueryuinodatepicker.min.js

Конфликт Bootstrap Datepicker с jquery UI datepicker. если вы хотите использовать средство выбора даты Bootstrap, попробуйте это

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

Это работает для меня. Я надеюсь, что это сработает и для вас :)

Подробнее: https://bootstrap-datepicker.readthedocs.io/en/master/#no-conflict-mode

Просто поместите эту строку после вызова Bootstrap datepicker

var _datepicker = jQuery.fn.datepicker;

И после вызова jQuery-ui JS

jQuery.fn.datepicker = _datepicker;

Итак, ваш звонок будет выглядеть как

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

Это может относиться только к Ruby on Rails... но я думаю, вы всегда можете попробовать это в другом месте. Гораздо более простое решение, которое я нашел, заключается в том, что, поскольку bootstrap-datepicker (с bootstrap-datepicker-rails) не полагается на jquery-ui... а полагается только на jquery... вы можете просто загрузить его ДО jquery- пользовательский интерфейс

//= require jquery
//= require bootstrap-datepicker
//= require jquery-ui

Это было решением для меня с Rails 5.2 и рельсами для выбора даты загрузки. Сначала он загружает bootstrap-datepicker и игнорирует jquery-ui. Таким образом, вы можете попробовать просто загрузить bootstrap-datepicker.js перед jquery-ui.min.js.