Bootstrap 弹出模式中的日期时间选择器显示问题

Question

Bootstrap 日期时间选择器版本 - 4.15.35

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

我给它添加了 widgetParent 选项；它现在不显示日期时间控件 window。我把添加的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;">

当控件放置在模态页底部时。模态快结束了，但是 space 足以显示控件。

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

Answer 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
        })

Answer 2

在引导程序中设置 css input-group z-index 自动

Bootstrap 弹出模式中的日期时间选择器显示问题

Bootstrap Datetimepicker Display Issue in Popup Modal

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3

bootstrap-datetimepicker