web-dev-qa-db-ja.com

jQuery UIの日付ピッカーがbootstrap datepickerと競合します

bootstrap datepickerを使用して2か月を表示したい。Googleで検索した後、bootstrap datepickerを使用して複数の月を表示する方法が見つからない。 JQuery UIを使用して複数の月を表示できます。

しかし、問題は次のとおりです。私のアプリケーションでは、bootstrap date pickerを使用しています。JQueryUI datepickerを使用しようとすると、Bootstrap datepickerがそれをオーバーライドし、 JQuery UIの日付ピッカーを見ることができます。

bootstrap datepickerをJQuery UIに置き換える方法を提案できますか？

私はこれを達成したかった： http://jqueryui.com/datepicker/#multiple-calendars

jquerytwitter-bootstrapjquery-uijquery-ui-datepickerbootstrap-datepicker
13
ersat.ice37

この問題は noConflictbootstrap-datepicker のメソッドを使用して解決できます。

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

$.fn.datepicker.noConflict()を実行するだけで、bootstrap datepickerを存在していた古い日付ピッカー（この場合はjQuery UI）に置き換えることができます。

両方の日付ピッカーを保持したい場合は、次の手順に従ってください。

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

その後、datepicker()メソッドを使用してjQuery UI日付ピッカーを初期化でき、bootstrap one 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>
26
T J

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

これを試して

#ui-datepicker-div{
z-index:350 !important;
}
1
jabu.hlong

日付ピッカーを使用している場合、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ではなくクラスを使用しています。

0
marcus

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;
0
kashyap chandarana

Bootstrap Datepickerはjquery UI datepickerと競合します。 f 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

0
Manjunath Bilwar

datepickerモジュールを含めずに、スクリプトの名前をjquery-ui.min.jsからjqueryuinodatepicker.min.jsに変更することなく、カスタムjquery-uiスクリプトをダウンロードできます。

0
Michael Marin

Vicが言ったことを拡張するには、jQuery UIをBootstrapで使用できますが、努力する価値がないかもしれません。SOからのこの投稿を参照してください。

Twitterを使用できますBootstrapとjQuery UIを同時に使用できますか？

この日付ピッカーには、必要なものを提供できるオプションがさらにあることがわかるかもしれませんが、複数のカレンダーは表示されません。 http://eternicode.github.io/bootstrap-datepicker/

また、jQuery UIのルックアンドフィールはbootstrapルックアンドフィールでは場違いに見える可能性があると考えていますが、それは私の意見です。

0
Matthew Doyle