tyebillion tyebillion - 3 months ago 7
HTML Question

Catch 22 situation for CSS z-index when using two Bootstrap date time pickers

I have a HTML form with two Bootstrap date time pickers, to allow the user to specify a start date / time and an optional end / date time. The pickers work except for the z-index ordering. The problem is that each picker needs to be in the foreground (foremost) when it is selected. But what happens is that the first picker does not appear in front of everything else when selected. It seems like a catch 22 situation, I need both pickers to be in front of the other.

HTML form part:

<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>
<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>
<input type="hidden" id="end_dt_tm" name="end_dt_tm">

The CSS:

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


Start selected
End selected


Why you need z-index?

If you remove it first picker will go over second.

Check here https://jsfiddle.net/fu2ft001/

Btw, you have extra " here at the end <input type="hidden" id="st_dt_tm" name="st_dt_tm"">


If problem is that you don't see picker because of some other elements then try adding this in your css:

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

Example of it here https://jsfiddle.net/fu2ft001/2/