Question

我想使用bootstrap datepicker显示两个月。在谷歌搜索后，我无法找到如何使用bootstrap datepicker显示多个月。我发现我可以使用JQuery UI显示多个月。

但问题是：在我的应用程序中，他们正在使用引导日期选择器。当我尝试使用JQuery UI datepicker时，Bootstrap datepicker会覆盖它，我无法看到JQuery UI datepicker。

您能否建议如何将引导程序日期选择器替换为JQuery UI？

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

Answer 1

可以使用noConflict

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

你可以做$.fn.datepicker.noConflict()，用现有的旧日期选择器替换bootstrap datepicker，在本例中为jQuery UI。

对于那些想要保留两个日期选择器的人，您可以执行以下操作：

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

之后，您将能够使用datepicker()方法初始化jQuery UI datepicker，并使用bootstrapDP()

引导一个

旁注：确保在jquery ui之后加载bootstrap datepicker，以便我们可以使用它noConflict()

＆＃13;

$(function() {
  if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
    var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;
  }
  $("#jquery-ui-datepicker").datepicker({});
  $('#bootstrap-datepicker').bootstrapDP({});
});

＆＃13;

#left {
  width: 50%;
  float: left;
}
#bootstrap-datepicker {
  width: 50%;
  float: right;
}

＆＃13;

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

＆＃13;

Answer 2

我发现jQueryUI日历弹出窗口的z-index很低。

试试这个

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

Answer 3

为了扩展vic所说的，jQuery UI可以与Bootstrap一起使用，但它可能不值得付出努力。从SO：

看这篇文章

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

你可能会发现这个日期选择器有更多的选项可以满足你的需要......我不会看到多个日历：http://eternicode.github.io/bootstrap-datepicker/

我还会认为jQuery UI的外观和感觉可能看起来与引导程序的外观和感觉不一致，尽管这只是我的看法。

Answer 4

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

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

以下是具有多个月的datepicker的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
        });
    });

正如您所看到的，我使用的是class而不是ID，因为在某些页面上我使用了多个日期选择器。

Answer 5

您可以下载自定义的jquery-ui脚本，而无需包括datepicker模块，并且无需将脚本名称从jquery-ui.min.js更改为jqueryuinodatepicker.min.js

Answer 6

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

Answer 7

只需在调用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;

Answer 8

这可能仅适用于Ruby on Rails ...但是我想您可以随时在其他地方尝试。我发现的一个简单得多的解决方案是，由于bootstrap-datepicker（带有bootstrap-datepicker-rails）不依赖jquery-ui ...而仅依赖jquery ...您可以在jquery-之前简单地加载它ui。

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

对于我来说，这是使用Rails 5.2和bootstrap-date-picker导轨的解决方案。它首先加载bootstrap-datepicker，而忽略jquery-ui。因此，您可以尝试在 jquery-ui.min.js 之前先加载 bootstrap-datepicker.js 。

jQuery ui datepicker与bootstrap datepicker发生冲突

8 个答案: