web-dev-qa-db-ja.com

Bootstrapモーダルの日付ピッカーが機能しない

私はグーグルで検索してSO同様の質問を検索しましたが、まだ何も見つかりませんでした。jqueryからモーダルを作成して開き、アクセスしようとする問題があります日付ピッカー。ただし、日付ピッカーJSはアクティブになりません。

$("[id=add]").click(function () {
    $("#myModal .modal-header h4").html("Request for Change");
    $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
    $("#myModal").modal("show");
});

（長い行の長さについては謝罪しますが、できる限り削除しました。問題に関連するコードを表示するだけです。）

私はこれらのスクリプトを上部で参照しています：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>

そして同じ<script> </script>上記のjquery関数としてのタグ。最上部に次のものがあります。

$('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
});

私はこのコードを同様の方法で使用しています（jqueryモーダルなし-単にcshtmlページ上で）。これは正しく機能します。この方法がうまくいかない理由はわかりません。私は開発者ツールを使用して問題を追跡しようとしましたが、エラーはありません-スクリプトは正しく読み込まれますが、Date Requiredをクリックすると、datepickerのjqueryに起動しません。

Jquery htmlを間違って使用してモーダルを作成していますか？

乾杯

javascriptjqueryhtmldatepicker
10
Craig

日付ピッカーはモーダルの後ろに隠れています。

日付ピッカーのz-indexモーダルの上の1050。

さらに、ブートストラップのモーダル表示イベントで日付ピッカーコードをラップします。

$('#myModal').on('shown.bs.modal', function() {
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body'
  });
});

$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');
  $("#myModal").modal("show");
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<style>
    .datepicker {
      z-index: 1600 !important; /* has to be larger than 1050 */
    }
</style>

<div class="well">
  <button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4></h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

注：bootstrap v3.3.6 CSSを追加し、デモ用のtablesorterスクリプトへのローカル参照を削除しました。

13
luchaos

モーダルがロードされた後、datepickerを呼び出す必要があります。

$("[id=add]").click(function() {

  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
  $("#myModal").modal("show");

  $('#myModal').on('shown.bs.modal', function(e) {
    $('.input-group.date').datepicker({
      format: "dd/mm/yyyy",
      startDate: "01-01-2015",
      endDate: "01-01-2020",
      todayBtn: "linked",
      autoclose: true,
      todayHighlight: true
    });
  });

});
6
Supun Praneeth

モーダル表示イベント で日付ピッカーを開始する必要があります

2
mzografski
$('#myModal').on('shown.bs.modal', function (e) {
     $('.date').datepicker();
});
1
Chinthaka

わたしにはできる！

$('#modal_form_horizontal').on('shown.bs.modal', function() {
    $('.daterangepicker').css('z-index','1600');
});
1
Евгений К

bootstrap（bootstrap 4.3.1でテスト済み）およびdatepickerおよびmodalのjquery（3.4.1）jquery ui（1.12.1）を使用した場合。 datepickerはモーダルで正常に動作します。

Uが要素入力でクラスform-control（ブートストラップ）も使用している場合を除きます。 bootstrapからのcssは、入力をcss position：relativeに設定します。この時点では、datepickerは表示されなくなります。

この問題の他の修正は次のとおりです。

.form-control.datepicker  {position:unset}

フォーム制御クラスを使用しないか

0
Bunkerbuster
$(document).on('click','#add',function(){
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
  });
})
0
Haz Pro

デフォルトでは、モーダルz-indexは2050です。datepickerz-indexは、モーダルz-indexより大きくする必要があります。

お気に入り：

.datepicker {
    z-index: 2051 !important;
}
0
Altaf

これはz-indexが原因です。これで、styles.cssで日付ピッカーのz-indexを手動で設定できます。

/*Date picker container*/ bs-datepicker-container { z-index: 3000; }
0
Mohit Sharma