在模态对话框中使用Bootstrap Clockpicker

Question

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.

Answer 1

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    
 });