Timepicker now button - how do I get the UTC time

[Andrew]

Using the reactive forms and <kendo-timepicker>

Clicking on the 'Now' button populates the timepicker field with the local browser time. How do I change it so when when user click on 'Now', it populates the timepicker field with the UTC time?

Thanks for your time.

[Svet]

Hi Andrew,

Thank you for the provided screenshot.

By default, all Kendo Ui for Angular Date Input components select a date in UTC with time and a time zone equal to the one used by the browser at the moment of the selection. If we need to modify the default selected value we can further stringify the selected date as per the requirements of the scenario. (For example the time zone can be stripped). We can use the (valueChange) event in order to get the selected value (upon clicking the "Now" button) and implement any custom logic, that is further required. Any specific desired custom format can be applied and the value can be sent to the server for further processing or storing in the database.

I hope this clears the picture. Let me know in case there is something unclear or any further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Andrew]

Hi Svetlin,

Thank you for your response, unfortunately for this field, i'm allowing the user to input the time as well as being able to use the 'Now' button.

For my scenario, I need the 'Now' button to populate the field with the UTC time so that the user can see the time in UTC.

I cannot use the valueChange event to change the time when the now button is clicked because I don't know if the event is triggered by the user updating the field manually or if the field is populated by the 'Now' button. If the valueChange event is from the user manually entering the time, I don't want to make any changes to the value, but if the event is fired by clicking the 'Now' button, I want to change the value to UTC.

Is there a way for me to intercept the 'Now' button event in order for me to do further processing before displaying the time in the field?

Andy

[Svet]

Hi Andy,

Thank you for the provided additional details.

Indeed, there is no dedicated event that allows to intercept the "Now" button click provided by the public API of the TimePicker. However, on the (open) event of the TimePicker we can use some custom JavaScript in order to attach the generic "click" event to the desired button. Please check the following example demonstrating this approach:

https://stackblitz.com/edit/angular-dmigch?file=app/app.component.ts

I hope this helps. Let me know in case any further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Caroline]

Hi Svetlin, thanks, the Stackblitz link is very helpful. 

However, I'm trying to see how I can implement this without event listeners and without touching DOM elements directly. Maybe using @HostListener instead but I don't know if this is supported by Kendo.

I have an InputTimeComponent as a wrapper over the Kendo DateTimePickerComponent, because we have multiple form fields that use date/time input.

- Currently, I put the @HostListener on that InputTimeComponent and it triggers when the "now" button is clicked. The problem is that it triggers for each of the InputTimeComponents - not just the InputTimeComponent that was open when the "now" button was clicked. This is because the @HostListener is listening for "document:click", in order to access not just a click of the DateTimePicker button but of the buttons inside of the popup.

-- Example in this stackblitz. See that when you press the "now" button in one of the dropdowns, there are two console statements printed.

- So to target only a click of the active InputTimeComponent, I put the @HostListener into a directive. The problem now is that it only fires when the user clicks the button to display the DateTimePicker, not if they click anywhere inside the DateTimePicker (i.e., the "now" button).

-- Stackblitz here. I don't know why the calendar icon isn't displaying but either way you can see that clicking the now button doesn't trigger anything.

Ideally I would add this directive on KendoTimeselector but I don't see a way to access it, and I guess it's also probably not a component itself.

Any suggestions, or is using event listeners our only option?

Thank you!

[Svet]

Hi Caroline,

Thank you for the provided details.

Indeed, adding the @HostListener within a component or directive that is used twice will result in its execution twice. I can confirm that this is expected.

What could be done to hide (not remove) the custom addEventListener is to add it within a directive that has the same selector as the component kendo-datetimepicker:

https://stackblitz.com/edit/angular-tyjttu

Feel free to write back if further information is required.

About the missing icons in the provided examples, that is due to the usage of an incompatible Kendo theme version.

[Caroline]

Thanks Svet, very helpful.

[Andrew]

Hi Svetlin,

Thank you for the stackblitz link. This is exactly what I'm looking for.

Andy

 

 

[Danny]

Were you able to change the value to UTC ? 

[Yanmario]

Hi Danny,

The developer can change the value property that is used by the component, but do keep in mind that machine offset is also considered as described in the following knowledge base article about DateInputs and time zones:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/dateinputs-manage-timezones/

Regards,
Yanmario
Progress Telerik