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

Timepicker and Timezones

6 Answers 454 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Elliot
Top achievements
Rank 1
Elliot asked on 08 Nov 2016, 06:51 PM

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?

6 Answers, 1 is accepted

Sort by
0
Elliot
Top achievements
Rank 1
answered on 08 Nov 2016, 07:04 PM
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.
0
Stefan
Telerik team
answered on 09 Nov 2016, 04:04 PM
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.
 
0
Elliot
Top achievements
Rank 1
answered on 09 Nov 2016, 06:41 PM

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.

 

0
Stefan
Telerik team
answered on 11 Nov 2016, 01:04 PM
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
 
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.
 
0
Elliot
Top achievements
Rank 1
answered on 11 Nov 2016, 06:34 PM

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.

 

0
Stefan
Telerik team
answered on 15 Nov 2016, 08:20 AM
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.
 
Tags
Date/Time Pickers
Asked by
Elliot
Top achievements
Rank 1
Answers by
Elliot
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or