Datepicker : 模态日期选择器 (z-index)答案

【问题标题】：Datepicker : Datepicker on Modal (z-index)Datepicker : 模态日期选择器 (z-index)
【发布时间】：2016-06-19 10:37:20
【问题描述】：

我今天尝试在 Bootstrap Modal 上显示 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>

这是我的日期选择器脚本：

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

我已经在使用 zIndexOffset 但它不起作用，日历仍然显示在模式后面。

任何人都可以提出解决方案吗？

谢谢。

【问题讨论】：

您是否尝试过使用选项container，在模式中添加日期选择器？
@visola 还没有，我应该把容器选项放在哪里？
这是选项：bootstrap-datepicker.readthedocs.io/en/latest/…
我放入了容器，但还是不行

标签： javascript jquery twitter-bootstrap jquery-ui datepicker

【解决方案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'
});

【讨论】：

@CodeOn，你能检查 DOM 以确保元素被放置在正确的位置吗？我看不出日期选择器不会显示在模态中的任何其他原因。我想我们需要更多细节。如果您可以创建一个重现此问题的 jsfiddle，将会有很大帮助。
这是我的小提琴jsfiddle.net/88q5eacb 很抱歉没有出现模式，但它在我的服务器上工作。
@CodeOn，我用你的 jsfiddle 创建了一个有效的。它甚至不需要container 选项。也许您可以尝试在此处重现您的问题：jsfiddle.net/88q5eacb/1

【解决方案2】：

我不知道这是否会导致您的问题，但您将标签设置为与输入不同的 ID

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

label for="" 属性应该设置为与之相关的输入元素的 id - 所以应该是

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

【讨论】：

【解决方案3】：

我用这个选项来修复。

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

模态打开时已应用此选项（将模态打开类添加到正文）

【讨论】：