17

ブートストラップの日付ピッカーを使用して 2 か月を表示したいと考えています。Google で検索した後、ブートストラップの日付ピッカーを使用して複数の月を表示する方法を見つけることができません。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 の後にブートストラップ 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 に答える
0

jQueryUI カレンダー ポップアップの z-index が低いことがわかりました。

これを試して

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