jQuery ui datepicker 与 bootstrap datepicker 冲突

Posted 2023-05-07

【中文标题】jQuery ui datepicker 与 bootstrap datepicker 冲突

【英文标题】：jQuery ui datepicker conflict with bootstrap datepicker

【发布时间】：2014-04-12 05:19:39

【问题描述】：

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

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

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

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

【问题讨论】：

如果可能，请提供您现在拥有且需要更改的最小代码部分。向我们展示您已经尝试过的内容。

【参考方案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 datepicker，并使用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>

【讨论】：

当我尝试您描述的用 jQuery 替换 Bootstrap 的方法时，我收到错误“未定义旧”。有什么想法吗？

@gordon613 该代码只是自引导源代码的摘录。如果你只想使用 jQuery UI 日期选择器，你应该调用它$.fn.datepicker.noConflict();

@T J。谢谢。我打开了一个单独的问题***.com/questions/50153428/…，因为我无法得到你建议的工作

旧未定义:(

@SizzlingCode 您确定要在 jQuery UI 日期选择器之后加载 BS 日期选择器吗？它应该在这个line 执行时出现

【参考方案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;

【参考方案3】：

如果使用 datepicker，您可以毫无问题地同时使用 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
        );
    );

如您所见，我使用类而不是 ID，因为在某些页面上我使用多个日期选择器。

【讨论】：

这是什么value="date.format("yyyy-MM-dd")"？不起作用。这个答案会防止碰撞吗？我认为 - 不。

【参考方案4】：

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

试试这个

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

【参考方案5】：

为了扩展 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 的外观和感觉可能与引导程序的外观和感觉不合适，尽管这只是我的看法。

【参考方案6】：

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

【讨论】：

您能解释一下如何获取自定义脚本吗？

【参考方案7】：

Bootstrap Datepicker 与 jquery UI datepicker 冲突。如果你想使用 Bootstrap datepicker 然后试试这个

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

【参考方案8】：

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

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

这是一个使用 Rails 5.2 和 bootstrap-date-picker rails 的解决方案。它首先加载 bootstrap-datepicker 并忽略 jquery-ui 。所以你可以尝试在 jquery-ui.min.js 之前加载 bootstrap-datepicker.js。