Using Bootstrap Clockpicker in modal dialog

Chandan D Nadig

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.

Anuj Kumar

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to show a modal dialog using bootstrap

From Dev

href in modal dialog in bootstrap

From Dev

Validation in bootstrap modal dialog

From Dev

How to make modal dialog with blur background using Twitter Bootstrap?

From Dev

Show progress bar in modal dialog using Twitter Bootstrap

From Dev

How to get ClockPicker for Bootstrap (Plugin) to appear in a Bootstrap Modal pop up form?

From Dev

How to get ClockPicker for Bootstrap (Plugin) to appear in a Bootstrap Modal pop up form?

From Dev

Twitter Bootstrap - Center Modal Dialog

From Dev

Default button in bootstrap modal dialog

From Dev

Image opens modal dialog bootstrap

From Dev

Using WindowFinder to find a modal dialog

From Dev

Disposing a Modal dialog using a condition

From Dev

Bootstrap modal dialog center image in body

From Dev

re-size the modal dialog in bootstrap dynamically

From Dev

Not able to access bootstrap modal dialog in Selenium Webdriver

From Dev

Minimize or collapse a bootstrap 2.3.2 modal dialog?

From Dev

PDF file to be displayed on the dialog modal via bootstrap

From Dev

Bootstrap modal-dialog is not getting display

From Dev

time-picker in bootstrap modal dialog

From Dev

Displaying a bootstrap Modal dialog from Angular Controller

From Dev

Jquery close bootstrap modal dialog completedly

From Dev

Unit testing React Bootstrap modal dialog

From Dev

re-size the modal dialog in bootstrap dynamically

From Dev

Add a confirm bootstrap modal/dialog to checkbox

From Dev

time-picker in bootstrap modal dialog

From Dev

Bootstrap modal-dialog is not getting display

From Dev

Bootstrap modal dialog set attributes from javascript

From Dev

Twitter Bootstrap 3 modal dialog not displaying

From Dev

How to detect the dismissal of a bootstrap modal dialog in javascript?

Related Related

  1. 1

    How to show a modal dialog using bootstrap

  2. 2

    href in modal dialog in bootstrap

  3. 3

    Validation in bootstrap modal dialog

  4. 4

    How to make modal dialog with blur background using Twitter Bootstrap?

  5. 5

    Show progress bar in modal dialog using Twitter Bootstrap

  6. 6

    How to get ClockPicker for Bootstrap (Plugin) to appear in a Bootstrap Modal pop up form?

  7. 7

    How to get ClockPicker for Bootstrap (Plugin) to appear in a Bootstrap Modal pop up form?

  8. 8

    Twitter Bootstrap - Center Modal Dialog

  9. 9

    Default button in bootstrap modal dialog

  10. 10

    Image opens modal dialog bootstrap

  11. 11

    Using WindowFinder to find a modal dialog

  12. 12

    Disposing a Modal dialog using a condition

  13. 13

    Bootstrap modal dialog center image in body

  14. 14

    re-size the modal dialog in bootstrap dynamically

  15. 15

    Not able to access bootstrap modal dialog in Selenium Webdriver

  16. 16

    Minimize or collapse a bootstrap 2.3.2 modal dialog?

  17. 17

    PDF file to be displayed on the dialog modal via bootstrap

  18. 18

    Bootstrap modal-dialog is not getting display

  19. 19

    time-picker in bootstrap modal dialog

  20. 20

    Displaying a bootstrap Modal dialog from Angular Controller

  21. 21

    Jquery close bootstrap modal dialog completedly

  22. 22

    Unit testing React Bootstrap modal dialog

  23. 23

    re-size the modal dialog in bootstrap dynamically

  24. 24

    Add a confirm bootstrap modal/dialog to checkbox

  25. 25

    time-picker in bootstrap modal dialog

  26. 26

    Bootstrap modal-dialog is not getting display

  27. 27

    Bootstrap modal dialog set attributes from javascript

  28. 28

    Twitter Bootstrap 3 modal dialog not displaying

  29. 29

    How to detect the dismissal of a bootstrap modal dialog in javascript?

HotTag

Archive