Question

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

Answer 1

我知道它已经晚了几个月了，但我找到了一个潜在的解决办法。将am / pm按钮更改为div而不是按钮可以解决问题，至少对我而言。我抓住了JordyMoos here的代码的更新版本。这仅在使用autoclose的bootstrap模式中进行测试：true和12hour：true。

在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 2

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

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

您是否可以尝试使用具有true值的autoclose属性初始化插件？

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

Answer 3

这是模态框的问题。实际上，最初的模态是不可见的，你可以在显示模态框之前调用clockpicker。尝试先打开模态框，然后打开时钟戳js.you可以尝试通过js打开模态框。

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

如果仍然无法正常工作，请尝试为clockpicker js添加一些小延迟对于EG：

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

Answer 4

我发布了针对此问题的修补程序，并添加了几个涉及12小时时间的选项：https://github.com/diracleo/bootstrap-clockpicker

在模态对话框中使用Bootstrap Clockpicker

4 个答案: