Использование Bootstrap Clockpicker в модальном диалоге

Question

Я использую this плагин clockpicker для Bootstrap в моем проекте. Все работает нормально, если используется на обычной странице. Но при использовании в модальном диалоге значения не выбираются плагином. Я могу выбрать часы и минуты, но часы просто исчезают, как только я нажимаю кнопку AM/PM или Done. Также, когда модальный прокручивается, часыпикер остается фиксированным в своем исходном положении, но это не так на обычной странице. Пожалуйста, помогите мне решить эту проблему.

Answer 1

Это проблема с модальной коробкой. На самом деле, первоначально модальный не отображается, и вы бы назвали clockpicker перед показом модального окна. Попробуйте сначала открыть модальный ящик, а затем clockpicker js.you можно попробовать открыть модальный ящик через 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  
}); 

Answer 2

Кажется, есть родственный открытым вопрос о проекте GitHub:

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

Не могли бы вы попробовать инициализировать плагин с AUTOCLOSE собственности с истинным значением?

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

Answer 3

Я знаю, что через несколько месяцев поздно, но я нашел потенциального исправления. Изменение кнопок am/pm на divs вместо кнопок устраняет проблему, по крайней мере для меня. Я схватил обновленную версию кода от JordyMoos here. Это было проверено только в модуле bootstrap с использованием autoclose: true и twelvehour: true.

Под если (options.twelvehour) изменить следующие две строки, как показано:

$('<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 вместо кнопки (кнопка сразу обнаруживается, но это не помогает, поскольку часы уже скрыты).

Answer 4

я опубликовал решение этой проблемы и добавил еще несколько вариантов, связанных с двенадцатичасовой время здесь: https://github.com/diracleo/bootstrap-clockpicker