Timepicker issue with bootstrap modals

[SAIBA0011]

Hi There,

I am having trouble with the bootstrap-timepicker when using bootstrap modals. I Have a form in the modal but as soon as i add the timepicker and try to select the time the little popup does not appear, the actual time when opened does get set though, and if i check the console, there is no logs of any errors to be found.

However, when im using this bootstrap-timepicker outside of a modal it is working 100% fine, very weird. i have tried adding classes to it, some additional styles, but still nothing.

[oshoemaker]

I am also experiencing this issue. I will take a look at the source and see what I can find...

[oshoemaker]

The issue is with the z-index. It is too low to pop over the top of the bootstrap modal. A simple workaround is to increase the add of the z-index. In my version this is on line 666.

  var zIndex = parseInt(this.$element.parents().filter(function() { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + 10;

change to:

  var zIndex = parseInt(this.$element.parents().filter(function() { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + 1050;

It needs to be 1050 or larger for it to work.

[oshoemaker]

Pull request: https://github.com/jdewit/bootstrap-timepicker/pull/327

[oshoemaker]

This is related (from bootstrap-datepicker): https://github.com/eternicode/bootstrap-datepicker/issues/1349

[RomuloLlabresJr]

There is also one issue , when time picker is on modal .. when setting manual input of time in widget inputs , it will clear the input... no event is triggered..

[TrevorPage]

I have too encountered this problem (using V0.5.2) and thanks to the information above I have worked around it using this temporary addition to my own CSS:

/* Hack to make Bootstrap Timepicker widget dropdown appear in a Bootstrap modal.
   See https://github.com/jdewit/bootstrap-timepicker/issues/326
   */
.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 1050!important;
}

This is nice because it doesn't involve modifying the library, which would be a PITA for version control.

[RomuloLlabresJr]

@TrevorPage can you manual input in the widget ? when the timepicker is in modal? i have some issue on this the input in widget will not accept any input...

[TrevorPage]

Hello @RomuloLlabresJr - I've just double-checked, and I confirm I can do the following while in a modal:

• Manually type numbers into the field.
• Use left/right cursor keys to switch between selection of hours and minutes.
• Use up/down cursor keys to increment/decrement 1 hour or 15 minutes.
• Click the glyphicon-time addon to make the widget appear, which works as expected.

[RomuloLlabresJr]

@TrevorPage here attached some link https://jsfiddle.net/pogmg1r4/

try manual input in widget, it wont work..or am I just missing something?

[TrevorPage]

All is OK if you replace your:

<input id="timepicker1">

with:

      <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small">
            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>

[RomuloLlabresJr]

oh ok.. i will try. thanks

[RomuloLlabresJr]

i updated the link https://jsfiddle.net/pogmg1r4/1/

still if you try to manual input in widget hour/minutes/meridian.. it wont work..

[TrevorPage]

Does for me. Using Chrome.

[RomuloLlabresJr]

Regarding the input in widgets , not triggering events . I found out what cause the problem.. because of tabindex=1 in modal..

[rloveless]

I'm also experiencing this issue. changing the z-order worked but I needed to remove the "template: 'modal'" iInitialization option

[rloveless]

Does this time picker work with bootstrap 3?

This may be a bootstrap 3 issue. see stack question:

[http://stackoverflow.com/questions/26006055/time-picker-in-bootstrap-modal-dialog]

[samnair0]

Hi I'm facing the same issue. The timepicker is not editable when open inside a modal, only with Mozilla

[iskandarzun]

@samnair0 same here, mozilla only. Anyone found the fix for this issue?

[evariaayu]

Hi, the timepicker is not editable using mozilla? Is there any advice for this?

[FinalAngel]

the tabindex seems to be the problem on the modal, I temporarily fixed this using:

timepicker.on('show.timepicker', function () {
    $('.modal').removeAttr('tabindex');
});

proof: https://jsfiddle.net/pogmg1r4/38/

also don't forget to set it again:

time.on('hide.timepicker', function () {
    $('.modal').attr('tabindex', -1);
});

[udaraz]

Replace this code with line #666. Issue is with z-index. This will take current modal z-index and increase it by 10.

      var index_highest = 0;
      $(".modal-class").each(function() {
            // always use a radix when using parseInt
            var index_current = parseInt($(this).css("zIndex"), 10);
            if (index_current > index_highest) {
                index_highest = index_current;
            }
        });     
      var zIndex = parseInt(this.$element.parents().filter(function() { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + index_highest;