doujiongqin0687
doujiongqin0687
2015-03-02 16:01
浏览 76
已采纳

在模态对话框中使用Bootstrap Clockpicker

I am using this clockpicker plugin for Bootstrap in my project. Everything works fine when used on a normal page. But when used in a modal dialog, the values are not being picked by the plugin. I am able to select the hours and minutes, but the clock simply disappears once I click on AM/PM or Done button. Also when the modal is scrolled, the clockpicker stays fixed in its initial position, but that's not the case in a normal page. Please help me solve this issue.

图片转代码服务由CSDN问答提供 功能建议

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • doufan6544
    doufan6544 2015-03-03 06:54
    已采纳

    It is the issue with modal box. Actually, initially modal is not visible and you would have called the clockpicker before modal box is shown. Try, opening modal box first and then clockpicker js.you can try opening modal box through js.

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

    If still it's not working then try adding some minor delay to clockpicker js For EG:

     $(selector).click(function () {
           function show_popup() {
                $('.clockpicker').clockpicker();   // clockpicker js  
            };
            window.setTimeout(show_popup, 1000); // 1 seconds    
     });
    
    点赞 评论
  • dtoaillwk759656786
    dtoaillwk759656786 2015-03-02 17:08

    It seems there is a related open issue on github project:

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

    Could you try to initialize the plugin with autoclose property with true value?

    $('#clock').clockpicker({
        autoclose: true
    });
    
    点赞 评论
  • douchan6512
    douchan6512 2015-08-12 20:00

    I know it's a few months late, but I found a potential fix. Changing the am/pm buttons to divs instead of buttons fixes the issue, at least for me. I grabbed an updated version of the code by JordyMoos here. This was tested only in a bootstrap modal using autoclose:true and twelvehour:true.

    Under if(options.twelvehour) change the following two lines as shown:

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

    Becomes

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

    and

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

    becomes

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

    This issue is caused by the click target being detected as .modal.fade.in instead of the button (the button is detected immediately after, but this isn't helpful since the clock is already hidden).

    点赞 评论
  • douke6027
    douke6027 2017-03-28 17:54

    I published a fix for this issue and added several more options involving twelve hour time here: https://github.com/diracleo/bootstrap-clockpicker

    点赞 评论

相关推荐