使用两个Bootstrap日期时间选择器时捕获CSS z-index的22种情况

Question

我有一个带有两个Bootstrap日期时间选择器的HTML表单，允许用户指定开始日期/时间和可选的结束/日期时间。除了z-index排序之外，拾取器工作。问题是每个选择器在选择时都需要位于前台（最前面）。但是，当选择时，第一个选择器不会出现在其他所有内容之前。这似乎是一个捕获22的情况，我需要两个采摘者在另一个前面。

HTML表单部分：

<label for="name">Start date / time</label>
<div class="input-group date pckr" id="st-pckr">
    <input type="text" class="form-control" id="inp-st">
    <span class="input-group-addon">
       <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<input type="hidden" id="st_dt_tm" name="st_dt_tm"">
<label for="name">End date / time</label>
<div class="input-group date pckr" id="end-pckr">
    <input type="text" class="form-control" id="inp-end">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<input type="hidden" id="end_dt_tm" name="end_dt_tm">

CSS：

.pckr {
    position: relative;
    z-index: 2000;
}

图片：

Answer 1

为什么需要"？

如果你删除它，第一个选择器将超过秒。

点击此处https://jsfiddle.net/fu2ft001/

顺便说一句，您最后<input type="hidden" id="st_dt_tm" name="st_dt_tm"">

还有.input-group-addon { position: relative; z-index: 2; }

<强>更新

如果问题是你因为其他一些元素而没有看到选择器，那么请尝试在你的css中添加它：

Wurzel b=3;

此处示例https://jsfiddle.net/fu2ft001/2/

Answer 2

您可以尝试在选择日期选择器时调整z-index：

$('#inp-st').click(function() {
 $(this).toggleClass('active-input');
}

CSS：

.active-input {
  z-index: 2000;
}

注意：我调整了代码，因为默认情况下<div>元素无法获得焦点，并且隐藏了input个元素。 focus在技术上仍然是更好的解决方案（例如，可以通过键盘导航访问表单元素），因此请在最终代码中记住这一点 - 可能有一种方法可以将焦点添加到div中，例如，给它一个tabindex值。