Bootstrap Timepicker not displaying

我有一个模态窗口，在这里我有一个表格，用户可以选择倍。我能得到的timepicker在表内工作这个例子。

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

然而，在这个例子中timepicker不显示。有没有例外被抛出。

Answer 1:

对于未来的参考，你可以编辑它的CSS这一部分：

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

Answer 2:

我结束了一个持续的jQuery插件，它的工作权利开箱的选择时间。

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

文章来源: Bootstrap Timepicker not displaying