Bootstrap Timepicker not displaying

Question

I have a modal window where I have a table where the user can choose times. I was able to get the timepicker to work inside the tables in this example.

$('.timepicker').timepicker().on('changeDate', function(ev){
         $('.timepicker').timepicker('hide');
         });

However, in this example the timepicker is not displaying. There are no exceptions being thrown.

Answer 1

For future reference, you can edit this part on its css:

.bootstrap-timepicker-widget.dropdown-menu.open {
   display: inline-block;
   z-index: 10000;
}

Answer 2

I ended up going with a jquery plugin which worked right out of the box for selecting the times.

HTML

<label><input id="mondayStartTime" type="text" style="width:100px" data-bind="value: mondayStartTime" class="time ui-timepicker-input"></input>Start</label>
<label><input id="mondayEndTime" type="text" style="width:100px" data-bind="value: mondayEndTime" class="time ui-timepicker-input"></input>End</label>

Javascript

$('#mondayStartTime').timepicker();
$('#mondayEndTime').timepicker();

Available via CDN.

It works well inside the modal dialog.

Here is an example:

http://jsfiddle.net/jkittell/C8w8v/126/

Answer 3

Replace this code with line #666 in bootstrap-timepicker.js file. It's work for me. This takes current modal z-index value and increase it with 10.

      var index_highest = 0;
      $(".modal").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;