I am using JQuery's Timepicker plug in. Here is my code:

<div class="form-group">
     <label for="time">Time of Event</label>
     <input  id="time" class="timepicker" >
     </input>
</div>

<script>

$(document).ready(function() {
    $('input.timepicker').timepicker({});
});
</script>

However, I get something like this:

As you can see, the timepicker appears behind the modal form and I am unable to access it. I think this has something to do with the z-index so I am playing around with that. However, I am unsuccessful at this time.

This is what I tried: <input id="time" class="timepicker" style="z-index:1151 !important" >

Any ideas?

EDIT: Okay, so for some reason when I try to change the z-index of the timepicker it doesn't get changed. It's like its getting overridden by something. However, if I manually change it in the Google Chrome Inspect window it works.

I am using JQuery's Timepicker plug in. Here is my code:

<div class="form-group">
     <label for="time">Time of Event</label>
     <input  id="time" class="timepicker" >
     </input>
</div>

<script>

$(document).ready(function() {
    $('input.timepicker').timepicker({});
});
</script>

However, I get something like this:

As you can see, the timepicker appears behind the modal form and I am unable to access it. I think this has something to do with the z-index so I am playing around with that. However, I am unsuccessful at this time.

This is what I tried: <input id="time" class="timepicker" style="z-index:1151 !important" >

Any ideas?

EDIT: Okay, so for some reason when I try to change the z-index of the timepicker it doesn't get changed. It's like its getting overridden by something. However, if I manually change it in the Google Chrome Inspect window it works.

• javascript
• jquery
• html
• css
• datetimepicker

• 1 set z-index for .ui-timepicker-container, like this : .ui-timepicker-container{ z-index:1151 !important; } – Mihai Alexandru-Ionut Commented Feb 21, 2017 at 15:51
• 1 I tried that and it worked! Wow thanks a lot. – anderish Commented Feb 21, 2017 at 15:54

1 Answer 1

You have to apply z-index for timepicker container.

.ui-timepicker-container{ 
     z-index:1151 !important; 
}