jQuery ui日期选择器与引导日期选择器冲突

Question

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

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

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

我想要实现这一点：http://jqueryui.com/datepicker/#multiple-calendars

Answer 1

这个问题可以使用bootstrap-datepicker的noConflict方法来解决

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

您可以只执行$.fn.datepicker.noConflict()，它将引导程序日期选择器替换为存在的旧日期选择器，在本例中为jQuery UI。

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

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

之后，您将能够使用datepicker()方法初始化jQuery UI日期选择器，并使用bootstrapDP()引导程序

附注:确保在jquery ui之后加载bootstrap datepicker，以便我们可以使用它的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>

​

Answer 2

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

为了扩展vic所说的内容，jQuery UI可以与Bootstrap一起使用，但可能不值得这样做。看看这篇来自SO的帖子：

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

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

我也会认为jQuery UI的外观和bootstrap外观看起来不太协调，尽管这只是我的观点。