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

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 官方网站上显示的那样。

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

如果您想使用 bootstrap 3.x，您必须阅读迁移文档并执行所需的更改。 如果您需要帮助，请给我一个标志:) 或者使用timepicker bootstrap3 ，它是您使用过的那个的一个分支。

检查此链接示例以查看工作示例。 检查+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;
}

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

template: 'modal'

Answer 5

更新这个问题的答案： bootstrap-timepicker现在支持 Bootstrap 3，但模态的这个问题是一个已知的错误。

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

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