Date Time Picker on google maps

[Bulut]

I am trying to implement datetime picker on google maps but somehow it is not working. here is my not working fiddle :)

[Stefan]

Hello, Bulut,

Thank you for the example.

I can assume that the issue occurs because the strip and the initialization are set an innerHTML string.

I can suggest to only add the start and end input elements with the "CenterControl" function and then inside the initMap function to initialize the DateTimePicker as shown in the documentation:

https://docs.telerik.com/kendo-ui/controls/editors/datetimepicker/overview

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Bulut]

Hi Stefan,

When I do what you described I am getting "Uncaught TypeError: Cannot read property 'max' of null". Can you provide me a working fiddle on google maps based on your solution?

[Stefan]

Hello, Bulut,
 
I started implementing the solution, but the example has JavaScript error initially.



If I remove the call the to missing function, then another JavaScript error occurs connected to the Google API:



Please ensure that there are no JavaScript errors in the application itself and I will gladly apply the needed Kendo UI related modifications to the example.

Regards,
Stefan
Progress Telerik

[Bulut]

Hi Stefan,

Sorry for the inconvenience. Here is the latest fiddle I made changes based on your suggestion and getting "Cannot read property 'max' of undefined" error.

[Stefan]

Hello, Bulut,

Thank you for the modified example.

After many different tests, I can confirm that this is a timing issue. The HTML elements "#start" and "#end" are still not present in the DOM when the DateTimePickers are trying to be initialized.

If I add a timeout to ensure that the elements will be present the Pickers are initialized:

https://jsfiddle.net/f2u8dcw4/48/

As this is an application specific, please ensure that the Pickers will be initialized when the DOM elements are already present.

Regards,
Stefan
Progress Telerik

[Bulut]

Hi Stefan,

Is there any better approach for this? Bc depending on page loading time sometimes it still doesn't show the pickers.

[Stefan]

Hello, Bulut,

The approach will mainly depend on the application logic.

Depending on the application, the pickers have to be initialized one the form is available inside the DOM. Please check for an event that will be called after the DOM elements are added and after that initialize the pickers.

Another option could be to initialize them on button click, which will add the example and after that will initialize the Kendo UI widgets.

Regards,
Stefan
Progress Telerik

[Bulut]

Do you have any examples that initializes pickers on button click?

[Bulut]

I already did, Ty.