Bootstrap 时间选择器未显示

Question

我有一个模式window，我有一个table，用户可以在其中选择时间。我能够让时间选择器在 this example 中的 table 内工作。

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

但是，在 this example 中，时间选择器未显示。没有抛出异常。

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

将此代码替换为 bootstrap-timepicker.js 文件中的第 666 行。这对我有用。这需要当前模态 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 时间选择器未显示

Bootstrap Timepicker not displaying

jquery

twitter-bootstrap

knockout.js