jQuery ui datepicker 与 bootstrap datepicker 冲突 [英] jQuery ui datepicker conflict with bootstrap datepicker

问题描述

我想使用引导日期选择器显示两个月.在谷歌上搜索后，我无法找到如何使用引导程序日期选择器显示多个月份.我发现我可以使用 JQuery UI 来显示多个月份.

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

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

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

解决方案

这个问题可以使用 noConflict 方法 引导日期选择器

$.fn.datepicker.noConflict = function(){$.fn.datepicker = 旧的；返回这个；};

你可以只做 $.fn.datepicker.noConflict() 用旧的日期选择器替换引导日期选择器，在这种情况下是 jQuery UI.

<小时>

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

if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {var datepicker = $.fn.datepicker.noConflict();$.fn.bootstrapDP = 日期选择器；}

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

引导一个

旁注:确保在 jquery ui 之后加载引导日期选择器，以便我们可以使用它的 noConflict()

<小时>

$(function() {如果 (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {var datepicker = $.fn.datepicker.noConflict();$.fn.bootstrapDP = 日期选择器；}$("#jquery-ui-datepicker").datepicker({});$('#bootstrap-datepicker').bootstrapDP({});});

#left {宽度:50%；向左飘浮;}#bootstrap-datepicker {宽度:50%；浮动:对；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><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="左"><p>日期:<input type="text" id="jquery-ui-datepicker"></p>

<div id="bootstrap-datepicker" class="输入组日期"><input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i><;/span>

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

解决方案

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>

这篇关于jQuery ui datepicker 与 bootstrap datepicker 冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！