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>

这是我的datepicker脚本：

$('#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>

=＆＃34;＆＃34;的标签属性应设置为与其相关的输入元素的id - 因此它应该是

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

Answer 3

我使用此选项进行修复。

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

当模态打开（类模态打开添加到正文）

时，已应用此选项

Datepicker：Modal上的Datepicker（z-index）

3 个答案: