在模式对话框中使用Bootstrap Clockpicker - Using Bootstrap Clockpicker in modal dialog

Using Bootstrap Clockpicker in modal dialog

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

我知道晚了几个月，但我找到了一个潜在的解决方案。将am/pm按钮改为div而不是按钮解决了这个问题，至少对我来说是这样。这只在使用autoclose:true和twelvehour:true的引导模式中进行了测试。

在if（options.12vehour）下，如图所示更改以下两行：

$('<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而不是按钮引起的（按钮在之后立即被检测到，但这没有帮助，因为时钟已经隐藏）。

github项目上似乎存在一个相关的开放问题：

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

你能试着用真值的autoclose属性初始化插件吗？

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

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

这是模态框的问题。实际上，最初模态是不可见的，您可能会在显示模态框之前调用时钟选择器。请尝试，先打开模态框，然后打开clockpicker js。您可以尝试通过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    
 });