Datepicker：Modal（z-index）のDatepicker

Question

今日、Bootstrap Modalにdatepickerを表示しようとすると、この問題に直面します。

私はdatepickerライブラリとしてbootstrap-datepickerを使用しています。ここ

<div class="form-group"> 
    <label for="message-text" class="control-label">Start Date</label> 
      <div class="input-group date"> 
       <div class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
       <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> 
      </div> 
</div> 

そして、私のDatePickerのスクリプトです：私はすでにzIndexOffsetを使用しますが、それは働いていない

$('#datepicker2').datepicker({ 
     autoclose: true, 
     format: 'yyyy-mm-dd', 
     zIndexOffset: 10000 
    }); 

、カレンダーはまだモーダル後ろ示すが

は、ここに私のモーダルフォームです。

誰も解決策を提案できますか？

ありがとうございます。

Answer 1

する必要がありますあなたはモーダルdiv内部の日付ピッカーコンテナを追加してみてください。あなたはモーダルにこのようなidを与えることができる：

<div class="form-group" id="myModalWithDatePicker"> 
    <label for="start_date" class="control-label">Start Date</label> 
    <div class="input-group date"> 
    <div class="input-group-addon"> 
     <i class="fa fa-calendar"></i> 
    </div> 
    <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> 
    </div> 
</div> 

を次にあなたは次のようcontainerオプションを使用することができます。

$('#datepicker2').datepicker({ 
    autoclose: true, 
    container: '#myModalWithDatePicker', 
    format: 'yyyy-mm-dd' 
}); 

Answer 2

属性がのIDに設定する必要があります「」それはあなたの問題を引き起こす場合、私は知らないが、あなたはsettingtheラベルが入力

<label for="message-text" class="control-label">Start Date</label> 

に異なるIDの場合と同様に=のラベルですそれが関連する入力要素 - それは

<label for="datepicker2" class="control-label">Start Date</label> 

Answer 3

私は修正するには、このオプションを使用していました。

.modal-open .ui-datepicker{z-index: 2000!important} 

ときモーダル開いて、このオプションは