Timepicker now button - how do I get the UTC time

5 posts, 1 answers
  1. Andrew
    Andrew avatar
    7 posts
    Member since:
    Jul 2011

    Posted 02 Oct 2019 Link to this post

    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.

  2. Svetlin
    Admin
    Svetlin avatar
    392 posts

    Posted 04 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Andrew
    Andrew avatar
    7 posts
    Member since:
    Jul 2011

    Posted 04 Oct 2019 in reply to Svetlin Link to this post

    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

  4. Answer
    Svetlin
    Admin
    Svetlin avatar
    392 posts

    Posted 08 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Andrew
    Andrew avatar
    7 posts
    Member since:
    Jul 2011

    Posted 08 Oct 2019 in reply to Svetlin Link to this post

    Hi Svetlin,

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

    Andy

     

     

Back to Top