Question

我正在尝试在boostrap模式对话框中实现时间选择器。但是当我打开对话框时，时间选择器仍然看起来像一个普通的文本字段，这让我相信这个jquery代码没有运行：

$('#timepicker1').timepicker();  // shown below

然而，我能够在普通网页上使用非常相似的代码显示时间选择器。问题似乎特定于在模态对话框中显示它。

以下是我正在使用的时间选择器的链接：

http://jdewit.github.io/bootstrap-timepicker/

这是我的模态对话框：

<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">close</button> <h4 class="modal-title" id="myModalLabel">New Event</h4> </div> <div class="modal-body"> <div class="input-append bootstrap-timepicker"> <input id="timepicker1" type="text" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

这是我的脚本，假设初始化时间选择器

$( document ).ready(function() {
    //$('#table').editableTableWidget();

    $( "#btn-new-event" ).click(function() {
        $('#dialog').modal('show');
        $('#timepicker1').timepicker();  // not running properly
    });

});

非常感谢任何帮助！

Answer 1

对我来说，我必须这样做才能让它发挥作用：

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 99999!important;
}

当然，请删除：

template: 'modal'

Answer 2

ibrahimyilmaz给出了正确的答案，完全如bootstrap timepicker official site所示。

这里唯一可以作为更精确指示的东西是timepicker只适用于bootstrap v2.x。

如果要使用bootstrap 3.x，则必须阅读migration doc并执行所需的更改。如果您需要帮助，请给我一个标志:)或者使用timepicker bootstrap3这是您使用过的那个叉子。

点击此链接example查看有效示例。查看+view Source链接以查看所有必需的脚本和链接。

希望它有用！

Answer 3

$('#timepicker1').timepicker({
    template: 'modal'
});

Answer 4

报告错误https://github.com/jdewit/bootstrap-timepicker/issues/326

你必须改变@ eugene1832所提到的z顺序：

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 1050!important;
}

AND 您还需要删除初始化选项：

template: 'modal'

Answer 5

要更新此问题的答案：bootstrap-timepicker现在支持Bootstrap 3，但此模式的问题是known bug。

此时此错误仍处于打开状态，但有一位用户建议将此段代码添加到您的css文件中，以使时间戳可见：

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 1050!important;
}

我会注意到这个解决方案对我不起作用，但它目前被列为可能的解决方案。当问题在Github上解决或有人提出另一种方法时，我会尝试更新此响应。

Answer 6

在bootstrap-timepicker.js文件中为第＃666行添加此代码。这对我有用

      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;

引导模态对话框中的时间选择器

6 个答案: