Javascript Catch 22使用两个引导日期时间选择器时CSS z索引的情况

我有一个带有两个引导日期时间选择器的HTML表单，允许用户指定开始日期/时间和可选的结束日期/时间。除z索引排序外，选择器都可以工作。问题是，每个选择器在被选中时都需要位于前台（最前面）。但所发生的情况是，第一个选择器在被选中时不会出现在所有其他选择器的前面。这似乎是一个第二十二条军规的情况，我需要两个拾荒者站在另一个前面

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">

图像：

---

当选择日期选择器时，您可以尝试调整

z-index

：

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

CSS:

---

注意：我调整了代码，因为默认情况下，

元素无法接收焦点，并且您的

输入

元素被隐藏

focus

在技术上仍然是更好的解决方案（例如，可以通过键盘导航访问表单元素），因此在最后的代码中记住这一点-可能有一种方法可以将焦点添加到div中，例如给它一个

tabindex

值。

为什么需要

z-index

若你们把它取下来，第一个选择器将超过第二个选择器

检查这里

顺便说一句，您在末尾有额外的

“

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

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

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