在模态对话框中使用 Bootstrap Clockpicker

Question

我在我的项目中为 Bootstrap 使用 this clockpicker 插件。在普通页面上使用时一切正常。但是当在模态对话框中使用时，插件不会选择这些值。我可以 select 小时和分钟，但是一旦我点击 AM/PM 或完成按钮，时钟就会消失。此外，当滚动模态时，时钟选择器会固定在其初始位置，但在普通页面中情况并非如此。请帮我解决这个问题。

Answer 1

github 项目似乎有一个相关的未解决问题：

https://github.com/weareoutman/clockpicker/issues/26

您可以尝试使用 autoclose 属性以真值初始化插件吗？

$('#clock').clockpicker({
    autoclose: true
});

Answer 2

是模态框的问题。实际上，最初模态是不可见的，你会在模态框显示之前调用 clockpicker。试试，先开模态框再开clockpickerjs.you可以试试用js开模态框

$(selector).click(function () {
            $('#myModal').modal('show');  // #myModal (id of modal box)
            $('.clockpicker').clockpicker();   // clockpicker js
        });

如果仍然无法正常工作，请尝试向 clockpicker js 添加一些小的延迟例如：

 $(selector).click(function () {
       function show_popup() {
            $('.clockpicker').clockpicker();   // clockpicker js  
        };
        window.setTimeout(show_popup, 1000); // 1 seconds    
 });

Answer 3

我知道已经晚了几个月，但我找到了一个潜在的修复方法。将 am/pm 按钮从按钮改为 div 可以解决这个问题，至少对我来说是这样。我获取了 JordyMoos here 的代码更新版本。这仅在使用 autoclose:true 和 twelvehour:true.

的 bootstrap 模态中进行了测试

在 if(options.twelvehour) 下更改以下两行，如下所示：

$('<button type="button" class="btn btn-sm btn-default clockpicker-button am-button">' + "AM" + '</button>')

变成

$('<div class="btn btn-sm btn-default clockpicker-button am-button">' + "AM" + '</div>')

和

$('<button type="button" class="btn btn-sm btn-default clockpicker-button pm-button">' + "PM" + '</button>')

变成

$('<div class="btn btn-sm btn-default clockpicker-button pm-button">' + "PM" + '</div>')

此问题是由于点击目标被检测为 .modal.fade.in 而不是按钮（之后立即检测到按钮，但这没有帮助，因为时钟已经隐藏）。

Answer 4

我针对此问题发布了一个修复程序，并在此处添加了涉及十二小时时间的更多选项：https://github.com/diracleo/bootstrap-clockpicker

在模态对话框中使用 Bootstrap Clockpicker

Using Bootstrap Clockpicker in modal dialog

php

twitter-bootstrap-3