弹出模式中的 Bootstrap Datetimepicker 显示问题答案

【问题标题】：Bootstrap Datetimepicker Display Issue in Popup Modal弹出模式中的 Bootstrap Datetimepicker 显示问题
【发布时间】：2016-05-01 01:46:40
【问题描述】：

引导日期时间选择器版本 - 4.15.35

我有一个模态形式的引导日期时间选择器。如果它位于模态窗口的顶部或中间，它工作正常。如果我将它放在底部，日期时间选择器会在屏幕的最顶部打开，而不是在容器下方或旁边。

我添加了 widgetParent 选项；它现在不显示日期时间控制窗口。我将添加的 z-index 更改为 999999，它仍然不显示它。

$('#StartDate').datetimepicker({
            useCurrent: false,
            format: 'MM/DD/YYYY hh:mm',
            widgetParent: '#StartDate',
            debug:true
        })

.bootstrap-datetimepicker-widget.dropdown-menu{
    z-index:99999999;
}

这是为同一个容器生成的两个部分 html 代码，只是位置发生了变化。

当控件放置在模态页面的顶部或中间时：

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour 
bottom" style="display: block; top: 125px; bottom: auto; left: 165px; right: auto;">

当控件放置在模态页面底部时。快到modal结束了，但是还有足够的空间来展示控件。

<div class="bootstrap-datetimepicker-widget dropdown-menu top" 
style="display: block; top: auto; bottom: 543px; left: 165px; 
right: auto;"><ul class="list-unstyled">

【问题讨论】：

你试过widgetParent: 'body',

标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-modal bootstrap-datetimepicker

【解决方案1】：

网上有几种解决方案，但它们对我不起作用。我将相对位置添加到控件的外部 div 中。此外，我将 widgetParent 设置为控件 ID。我和他们一起玩，每次尝试后都删除了我的缓存。最后，我删除了 widgetParent 选项并添加了 position:relative 到外部 div，它可以工作。

//输入

    <div class="form-group" style="position:relative;">
      <label for="StartDate" class="sr-only">Start Date</label>
     <input type="text" name="StartDate" id="StartDate" class="form-control">
   </div>

$('#StartDate').datetimepicker({
            useCurrent: false,
            format: 'MM/DD/YYYY hh:mm',
            debug:true
        })

【讨论】：

style="position:relative;" 为我工作

【解决方案2】：

在 botstrap css input-group z-index auto 中设置

【讨论】：