17

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

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

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

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

4

8 回答 8

33

这个问题可以使用bootstrap-datepickernoConflict的方法解决

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

于 2016-01-08T16:31:55.523 回答
1

在调用 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;
于 2019-09-25T06:33:32.310 回答
0

To expand on what vic said, the jQuery UI can be used with Bootstrap but it may not be worth the effort. See this post from SO:

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

You may find that this datepicker has more options that could give you what you need... I don't see multiple calendars though: http://eternicode.github.io/bootstrap-datepicker/

I would also consider that the jQuery UI look and feel may look out of place with the bootstrap look and feel, though that's just my opinion.

于 2014-04-15T18:16:51.187 回答
0

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

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

这是具有多个月份的 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
        });
    });

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

于 2014-05-07T13:31:33.767 回答
0

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

于 2019-03-21T16:14:28.713 回答
0

这可能只适用于 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 rails 的解决方案。它首先加载 bootstrap-datepicker 并忽略 jquery-ui 。所以你可以尝试在jquery-ui.min.js之前加载bootstrap -datepicker.js 。

于 2020-05-05T11:11:39.993 回答
0

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

于 2018-09-06T14:22:19.687 回答
0

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

尝试这个

#ui-datepicker-div{
z-index:350 !important;
}
于 2016-02-08T09:42:13.790 回答