日期时间选择器显示在南窗格后面答案

【问题标题】：datetimepicker showing behind south pane日期时间选择器显示在南窗格后面
【发布时间】：2016-04-06 08:55:20
【问题描述】：

我在 jquery ui 布局中显示 datetimepicker 时遇到问题，它将显示在南窗格的后面。

<div class="ui-layout-center">Center
    <p><a href="http://layout.jquery-dev.com/demos.html">Go to the Demos page</a></p>
    <p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
    <p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">
  <div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>

【问题讨论】：

标签： css bootstrap-datetimepicker jquery-ui-layout

【解决方案1】：

我遇到了类似的问题，我用this 解决了它。打开时，我将位置设置为小部件。

var $parent = $("#wrapper");
$parent.css("position", "relative");
$element
.datetimepicker({
widgetParent: $parent
}).on("dp.show", function () {
var widget = $(".bootstrap-datetimepicker-widget");
if (widget[0]) {
  widget.css({
    position: "fixed",
    "z-index": 99999999,
    top: $element[0].getBoundingClientRect().top - widget.height() - 10,
    left: $element[0].getBoundingClientRect().left,
    bottom: "auto",
    right: "auto"
  });
}
});

在我的项目中，我使用 body 标签作为包装器。但在这个版本中，我在最后使用了一个包装器。

<div id="wrapper"></div>

【讨论】：