Блог

Я пытаюсь интегрировать средство выбора даты и времени eonasdan, загрузив как « bower install eonasdan-bootstrap-datetimepicker#latest --save «, которое установлено с версией 4.17.47, ссылаясь http://eonasdan.github.io/bootstrap-datetimepicker /

Он отлично работает на всех страницах, кроме модального всплывающего окна. В консоли браузера нет проблем, когда я нажимаю на поле ввода bootstrap-datetimepicker-widget , оно не загружается —

Ниже приведен код —

 Html : input type='text' class="form-control" id='datetimepicker8'

Script : $('#datetimepicker8').datetimepicker();
  

Есть предложения?

Я использую все необходимые библиотеки, поскольку они отлично работают на других страницах моего приложения.

Я пробовал с jquery 3.2.1 / 3.3.1, используя moment.js 2.18.1, момент-часовой пояс 0.5.13, bootstrap 3.3.7, datetimepicker 4.7.47

Я использую загрузчик polymer для загрузки пользовательских файлов *.html вместе с компонентами bower с базовой структурой nodejs.

Все пользовательские HTML-файлы инкапсулируются с помощью <dom-module> , когда загружается родительская html-страница (имеющая ссылку на popup modal), вызывается ее функция ready вместе с функцией ready popup modal (другой *.html), которая загружается datetimepicker , но когда я нажимаю на datetimepicker поле ввода, календарь не отображается. bootstrap-datetimepicker-widget Не отображается, как я проверял из консоли браузера, однако виджет отлично отображается на других страницах моего приложения.

Я попытался отладить datetimepicker() функцию в консоли браузера, а также с помощью функции оповещения, чтобы понять возвращаемый datetimepicker объект.

 alert(JSON.stringify($('#datetimepicker8').datetimepicker(), null, 4));
  

Результат приведенного выше предупреждения во всплывающем окне, где datetimepicker не работает, совпадает с результатом мест, где datetimepicker работает в моем приложении, он просто не отображает календарь datetimepicker во всплывающем окне.

Я подумал, что это проблема с браузером, поэтому попробовал следующую версию Chrome: Версия 73.0.3683.86 (официальная сборка) (32-разрядная) Версия 73.0.3683.86 (официальная сборка) (64-разрядная) Версия 72.0.3626.81 (Официальная сборка) (64-разрядная) ПРИМЕЧАНИЕ: Мое приложение разработано в основном для Chrome, мы не поддерживаем другие браузеры.

Также пробовал в окне Chrome в режиме инкогнито после удаления моего профиля Chrome.

Я также пытался включить cdn js вызовы непосредственно в файл popup *.html, но при отладке я обнаружил, что он ссылается на nodejs 3.2.1 из пакета jspm приложения и datetimepicker из загрузчика polymer, что абсолютно правильно.

 HTML : input type='text' class="form-control" id='datetimepicker8'

Script : $('#datetimepicker8').datetimepicker();
  

Приведенный выше вызов скрипта помещается внутри готовой функции.

Ожидаемый результат: datetimepicker должен загрузиться в поле ввода. Фактический результат: При нажатии на поле ввода datetimepicker не загружается.

Спасибо Udit, Mishu amp; team, Ваш ответ дал мне направление. Ниже приведено решение, которое я применил —

Datetimepicker некорректно загружался в модальном всплывающем окне, которое появляется как отдельное окно, поэтому я добавил следующую функцию загрузки jquery, чтобы заставить ее работать.

$(функция(){ $(‘#datetimepicker8’).datetimepicker(); });

Большое спасибо.

Вы пытались вызвать $('#datetimepicker8').datetimepicker() внутри модального события показа всплывающего окна show.bs.modal . Я предполагаю, что вы привязываете datepicker к готовому документу или загрузке страницы. Вам нужно привязать его при появлении модального всплывающего окна