CODEWITHSUNDEEP
phptwitter-bootstrap-3
Chandan D Nadig
Chandan D Nadig

Reputation: 165

Using Bootstrap Clockpicker in modal dialog

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.

Upvotes: 2

Views: 8815

Answers (4)

Anuj Kumar
Anuj Kumar

Reputation: 468

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

Upvotes: 1

Dane Iracleous
Dane Iracleous

Reputation: 1759

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

Upvotes: 2

SchuhM92
SchuhM92

Reputation: 41

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).

Upvotes: 4

kurroman
kurroman

Reputation: 986

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

Upvotes: 3

Related Questions