This is a migrated thread and some comments may be shown as answers.

Date Time Picker on google maps

9 Answers 36 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Bulut
Top achievements
Rank 1
Bulut asked on 12 Jun 2018, 10:48 PM
I am trying to implement datetime picker on google maps but somehow it is not working. here is my not working fiddle :)

9 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 13 Jun 2018, 08:04 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Bulut
Top achievements
Rank 1
answered on 13 Jun 2018, 03:19 PM

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?

0
Stefan
Telerik team
answered on 14 Jun 2018, 06:33 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Bulut
Top achievements
Rank 1
answered on 14 Jun 2018, 03:34 PM

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.

0
Stefan
Telerik team
answered on 15 Jun 2018, 06:34 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Bulut
Top achievements
Rank 1
answered on 20 Jun 2018, 02:32 AM

Hi Stefan,

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

0
Accepted
Stefan
Telerik team
answered on 20 Jun 2018, 06:25 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Bulut
Top achievements
Rank 1
answered on 09 Nov 2018, 10:23 PM
Do you have any examples that initializes pickers on button click?
0
Bulut
Top achievements
Rank 1
answered on 11 Nov 2018, 03:17 AM
I already did, Ty.
Tags
Date/Time Pickers
Asked by
Bulut
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Bulut
Top achievements
Rank 1
Share this question
or