Datepicker：模態上的Datepicker（z索引）

Question

今天，當我嘗試在Bootstrap Modal上顯示datepicker時，我遇到了這個問題。

我正在使用bootstrap-datepicker作為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>

這是我的日期選擇器腳本：

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

我已經使用zIndexOffset了，但是它不起作用，日歷仍然顯示在模式后面。

有人可以建議解決方案嗎？

謝謝。

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

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

標簽for =“”屬性應設置為與之相關的輸入元素的ID-因此應為

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

Answer 3

我使用此選項進行修復。

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

模態打開時已應用此選項（向主體添加了modal-open類）