Timepicker and Timezones

7 posts, 0 answers
  1. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 08 Nov Link to this post

    I am using angular and have the following inside and ng-repeat:

    <input kendo-time-picker ng-model="d.offDuty" k-interval="15" required /> {{d.offDuty}}

    When I select say 7:00 AM the value of {{d.offDuty}} is: "2016-11-08T12:00:00.000Z"

    I want the value to include the timezone (EST).  Two questions: Why is the timezone stripped and how do I get it to use the timezone?

  2. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 08 Nov in reply to Elliot Link to this post

    Sorry, I actually had k-ng-model for the binding. With ng-model it actually just has the text version of what is in the time picker.
  3. Kendo UI is VS 2017 Ready
  4. Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 09 Nov Link to this post

    Hello Elliot,

    The value which is return when using k-ng-model is using JSON.stringify, which is the default AngularJS behaviour.

    I can suggest using a function to manually format the date in the desired format. Please check the Dojo example demonstrating how to use a function to format the date:

    http://dojo.telerik.com/aKASe

    I hope this example will help you to format the date in the desired way.

    Regards,
    Stefan
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  5. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 09 Nov in reply to Stefan Link to this post

    Ok, that makes sense but if that is the case when the date comes from the api the kendo time picker should convert it into the local timezone and not show the utc time.  This seems to be a real problem with the control in that it forces devs to handle this manipulation everywhere.

    For example lets say I am in the eastern standard timezone and I select 7:00 AM.  The date that goes to the server and that is stored in the database is in utc so 12:00.  When I then pass it back it comes as utc 12:00 and that is what shows up in the timepicker but this is clearly not correct.  It should show 7:00 AM because I am in EST.  This should not require me to handle date manipulation.

     

  6. Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 11 Nov Link to this post

    Hello Elliot,

    I can assume that the reason for this behaviour is that the data which is return from the server does not have a Z zone designator (UTC date). Please check the format in the model, I can assume that parsing the date in the model can cause this issue.

    I made a Dojo example demonstrating how returning the date with Z and without Z can reflect in showing the local time zone or not, which is JavaScript date specific and the Kendo UI team has no control over it:

    http://dojo.telerik.com/uleMI

    Also, I can suggest checking the article for timezones in our documentation:

    http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/timezones#basics

    Regards,
    Stefan
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  7. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 11 Nov in reply to Stefan Link to this post

    Thanks for that.  I solved the issue of appending the Z by adding the following to my startup.cs:

    jsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Utc;

    This sends back a string of the date which is normal for json but the timepicker doesnt display the value unless I do a kendo.parseDate().  I thought this strange so I tried a date picker and it did display the date. Why would the datepicker display accurately and the timepicker not display anything?

    I think this is an issue with the timepicker.  Since api's generally return json (string) data it would be nice if the date/time controls attempted to parse the string without having to manually transform them.  The datepicker seems to do it however the timepicker not.

     

  8. Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 15 Nov Link to this post

    Hello Elliot,

    I can confirm that they have different behaviour because the DatePicker and the TimePicker are different widgets.

    The reason for the different behaviour is that the two widgets have different default parse formats based on dates and time. But this observation does not mean that the DatePicker will be able to parse all date formats and the TimePicker will not parse any dates, this depends on the date format.

    That is why I can suggest using the format property of the TimePicker. This format is used to display the value of the widget and to parse the input:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker#configuration-format

    Regards,
    Stefan
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready