I am trying to integrate eonasdan datetime picker by downloading as "bower install eonasdan-bootstrap-datetimepicker#latest --save" which installed with ver 4.17.47, referring http://eonasdan.github.io/bootstrap-datetimepicker/
It is working perfectly on all pages except on modal pop-up. There are no issue on browser console, When I click on Input box bootstrap-datetimepicker-widget is not loaded -
Following is the code -
Html : input type='text' class="form-control" id='datetimepicker8'
Script : $('#datetimepicker8').datetimepicker();
Any suggestions ?
I am using all necessary libraries as it is working fine on other pages of my application.
I've tried with jquery 3.2.1/3.3.1 using moment.js 2.18.1, moment-timezone 0.5.13, bootstrap 3.3.7, datetimepicker 4.7.47
I am using polymer loader to load the custom *.html files along with bower components with underlying nodejs structure.
All custom html file are encapsulated with <dom-module>, When the parent html page (which is having a reference of popup modal) is loaded, its ready function is called along with ready function of popup modal (another *.html) which loads datetimepicker but when I click on datetimepicker input box, calendar does not shows up. The bootstrap-datetimepicker-widget does not show up as I checked from the browser console, however the widget shows up perfectly on other pages in my application.
I tried debugging the datetimepicker() function on browser console, & also by following alert function to understand the returned datetimepicker object.
alert(JSON.stringify($('#datetimepicker8').datetimepicker(), null, 4));
The result of above alert at popup window where datetimepicker is not working is same with the result of the places where datetimepicker is working in my application, its just not rendering the datetimepicker calendar on popup window.
I thought of its a browser issue so tried with following Chrome version : Version 73.0.3683.86 (Official Build) (32-bit) Version 73.0.3683.86 (Official Build) (64-bit) Version 72.0.3626.81 (Official Build) (64-bit) NOTE : My application developed mainly for chrome, we dont support other browsers.
Also tried on Incognito Chrome window after deleting my chrome profile.
I also tried by including cdn js calls directly on popup *.html file but on debugging I found that it was referencing nodejs 3.2.1 from application jspm package & datetimepicker from polymer loader which is completely correct.
HTML : input type='text' class="form-control" id='datetimepicker8'
Script : $('#datetimepicker8').datetimepicker();
The above script call is placed inside a ready function.
Expected Result : datetimepicker should load on input box. Actual Result : On a click of input box datetimepicker does not load.
$('#datetimepicker8')is the equivalent ofdocument.getElementById('datetimepicker8')and that wouldn't work in a compoenent with ShadowDOM. Or better said: it would work, but, as it would query at the document level and not inside the ShadowDOM, it would either not find anything, or find another element than the one you want. - mishu