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

Josiane Ferice 发表于 Dev

乔西恩·费里斯（Josiane Ferice）

Bootstrap Datetimepicker版本-4.15.35

我有一个模态形式的引导datetimepicker。如果它位于模式窗口的顶部或中间，则效果很好。如果我将其放在底部，则日期时间选择器将在屏幕的顶部而不是在容器的下方或旁边打开。

我添加了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;">

当控件放置在模式页面的底部时。这几乎是模态的结尾，但是有足够的空间来显示控件。

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

乔西恩·费里斯（Josiane Ferice）

在线上有几种解决方案，但是它们不适用于我。我在控件的外部div中添加了相对位置。另外，我将widgetParent设置为控件ID。我和他们一起玩耍，每次尝试后都删除了我的缓存。最后，我删除了widgetParent选项，并向外部div添加了position：relative，并且可以正常工作。

//输入

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。