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

【问题标题】：time-picker in bootstrap modal dialog引导模式对话框中的时间选择器
【发布时间】：2019-10-31 22:32:13
【问题描述】：

我正在尝试在 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
    });

});

任何帮助将不胜感激！

【问题讨论】：

您可以尝试两件事： 1. 将时间选择器代码移到模态显示代码之前。 2.将timepicker代码移出点击事件代码。测试一下看看效果如何。
你的 HTML 在哪里？你把它包裹在父 <div class="bootstrap-timepicker"> 中了吗？
两个cmets都同意，仅从js很难判断。您还必须记住，bootstrap.js 和 timepicker.js 的链接安排很重要
对不起，我以为我发布了我的 html，但似乎我没有。
我会更新问题

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

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

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

当然，删除：

template: 'modal'

【讨论】：

【解决方案2】：

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

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

如果您想使用 bootstrap 3.x，您必须阅读 migration doc 并执行所需的更改。如果您在这方面需要帮助，请给我一个标志 :) 或使用 timepicker bootstrap3 ，它是您使用过的一个分支。

查看此链接example 以查看工作示例。检查+view Source 链接以查看所有必需的脚本和链接。

希望有用！

【讨论】：

谢谢，这很有帮助

【解决方案3】：

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

【讨论】：

【解决方案4】：

这是一个报告的错误https://github.com/jdewit/bootstrap-timepicker/issues/326

您必须更改 @eugene1832 提到的 z 顺序：

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

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

template: 'modal'

【讨论】：

【解决方案5】：

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

此时该错误仍然存在，但一位用户建议将这段代码添加到您的 css 文件中以使时间选择器可见：

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

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

【讨论】：

为我工作，但我不得不删除模板：'modal' 选项。

【解决方案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;

【讨论】：