Bootstrap Timepicker не отображается

Question

У меня есть модальное окно, где у меня есть таблица, где пользователь может выбрать время. Я смог заставить timepicker работать внутри таблиц в this example.

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

Однако в this example timepicker не отображается. Исключений нет.

Answer 1

Я закончил с jquery plugin, который работал прямо из коробки для выбора времени.

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(); 

Доступны с помощью CDN.

Он хорошо работает внутри модального диалога.

Вот пример:

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

Answer 2

Для дальнейшего использования, вы можете редактировать эту часть на своем CSS:

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

Answer 3

Заменить этот код строки # 666 в bootstrap-timepicker.js файле , Это работа для меня. Это принимает текущее значение мода z-index и увеличивает его с помощью 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;