Timepicker and Timezones

[Elliot]

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?

[Elliot]

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.

[Stefan]

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

 

 

[Elliot]

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.

 

[Stefan]

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 in our documentation:

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

Regards,
Stefan
Telerik by Progress

 

 

[Elliot]

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.

 

[Stefan]

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