UTC DateTime handling with DatePicker and Kendo UI Grid Edit Dialog

[David]

We have a strange issue where the edit template for our grid is causing issues when editing dates.The dates are stored on the server in UTC timezone.
We use the following pattern to set the timezone:-       
private DateTime _minDate;       
public DateTime MinDate        {           
    get { return _minDate; }           
    set { _minDate = DateTime.SpecifyKind(value, DateTimeKind.Utc); }       
}The dates get loaded into the grid using WebApi OData services.{"Id":50088,"ProductId":101437,"Valor":"12224000","ISIN":"CH0122240002","Description":"Outperformance Bonus Certificate, Multi Shares","Provider":"CSIB","AlertedTicker":"KO UN","ProtectionPercentage":1.0,"ProtectionType":"Protection Lost","UnderlyingCurrency":"USD","BarrierLevel":190.0,"BarrierPercentage":70.0,"BarrierType":"Low","BarrierId":0,"EventStructureId":170378,"Date":"2013-11-20T00:00:00Z","Comment":null,"Confirm":false,"Reject":false}The OData service correctly serializes the UTC date and the date get to the UI intact.After editing the date using a date picker control but just typing using the keyboard the data is sent back to the server in the wrong format.{ "odata.metadata":"http://localhost:51850/web/odata/$metadata#PendingBarrierAlerts/@Element","Id":50088,"ProductId":101437,"Valor":"12224000","ISIN":"CH0122240002","Description":"Outperformance Bonus Certificate, Multi Shares","Provider":"CSIB","AlertedTicker":"KO UN","ProtectionPercentage":1.0,"ProtectionType":"Protection Lost","UnderlyingCurrency":"USD","BarrierLevel":190.0,"BarrierPercentage":70.0,"BarrierType":"Low","BarrierId":0,"EventStructureId":170378,"Date":"2013-11-20T23:00:00Z","Comment":null,"Confirm":false,"Reject":false}Notice the date has a changed time !How can we edit UTC dates in a grid and correctly return them to the server using OData as a transport and a remote datasource ?

[David]

Here is a JsFiddle showing that it seems the datepicker textual input control is the issue.

http://jsfiddle.net/dmarsh26/Rn4BE/

Altering the date by typing a day changes the time but it does not change the time when a datepicker calendar is used with a mouse.

[Alexander Popov]

Hi David,

Date objects in JavaScript are always created with a time zone offset (taken from the OS clock), so they should be manually converted to UTC before sending them to the server. I would recommend you to check the following Code Library project:  

• Using UTC time on both client and server sides.

On a side note I would suggest using the DateTimePicker instead of the DatePicker in case the users will be able to edit the hours option.

Regards,
Alexander Popov
Telerik

[David]

Hi Alexander,

I already read every UTC related message on these forums including the one you posted. As mentioned we have implemented the serverside DateTime SpecifyKind change already.

We are using OData so we do get the Grid model populated with the correct Dates on read of the datasource, so the onRequestEnd() function does nothing for us.

Yes I am aware of the default JavaScript functionality that assumes local time, and in the Kendo source there is a lot of date parsing code to try to work around this, and in some cases it works, if you look at my JS fiddle you will see that it works for the kendoDatePicker calendar, but it fails on the related text input control.

Manually changing every date with a timezone offset does not seem like a good solution and is impractical for the in built Grid dialogs.

I think a custom binder would be a good solution but the current implementation of kendoDatePicker forbids custom binders.

An automatic way to intercept the grid sync might also be workable, but parameterMap does not seem to work well with OData datasources, so not sure how we can do this.

We do not wish to deal with times at all, we only care about the Date and do not wish it to change in different timezones. The C# DateTime and JavaScript Date object's always have a time component however, and setting this to 00:00:00 and UTC+0 does not help as Kendo Javascript alters the timezone in some manner.

How can we pass just a Date between client and server with no unexpected mutation ?

We need to pass Date from server -> client -> server where
the server and client are in different timezones, using Kendo widgets
and OData, this seems a basic requirement that Kendo UI should be able
to meet.

best regards

David

[Alexander Popov]

Hello David,

The DataSource's requestEnd event could be used to convert the dates to UTC time regardless of the fact that OData is used, as you can see in this example. Please note that the dates used in the jsFiddle example are also created with an offset. Here is an updated example that converts the Date to UTC, using the approach shown in the Code Library project. I prepared an example that uses a CRUD Grid with dates and OData service as a back-end. When the server runs on a UTC time zone machine the dates will be correctly saved and retrieved regardless of the client's time zone. You can find the file attached.

Regards,
Alexander Popov
Telerik

[David]

Hello Alexander,

Thanks for your help, our dates come as UTC from the server to JavaScript as they come in ISO format eg "1/1/2012 00:00:00Z" where the 'Z' is UTC timezone.
The Kendo OData source seems to deal with this correctly and creates 'UTC' dates, for example if I am in UTC+2 timezone then the time string "00:00:00Z" gets converted to a Date object with 00:02:00 UTC+2.
This is all fine as when this is submitted back through a Kendo grid sync and gets sent to the server this gets converted back to the correct JSON UTC string and therefore is correct when it gets to the server.

We do not need the 'requestEnd' event handler, this seems only useful for non ISO date strings like you might get from MVC or similar eg "/Date/7698769776...".

We use a grid popup edit dialog there is a kendo datepicker in the template.
I sent a fiddle with the date picker.

When you 'pick a date' (with calendar and mouse) it correctly keeps the adjusted UTC time and zone from the grid eg 00:02:00 UTC+2.

When you enter/edit a date with the keyboard in the same Kendo control it changes the time on focus out.
It becomes a JavaScript Date with 00:00:00 UTC+2, this is not safe to send back from the grid in OData form, it undergoes the toUTCString() JavaScript conversion for example

Read from DB as OData source :- 1/11/2013 00:02:00 UTC+2
After kendo datepicker with format "dd/MM/yyyy" keyboard edit becomes :- 1/11/2013 00:00:00 UTC+2
After kendo grid serialization to OData Json becomes :- "31/10/2013 22:00:00Z"
At this point as you can see both the date and time are now totally incorrect !

The source of the issue appears to be keyboard edit of a kendo datepicker with a date based format.
This is seen in my original JsFiddle and also your fiddle.
In the first control with a date format picker. Simply edit the date with the keyboard and see the hours change without the timezone below, the same does not happen with a calendar date pick on same control. We have no workaround as we would need to determine how the user uses the control.

It would seem a bug and better to make both edit by keyboard and edit by mouse not change the time portion when there is no time format string.

best regards

David Marsh

[Alexander Popov]

Hello again David,

I apologize for misunderstanding the purpose of your jsFiddle example. Indeed, there is a difference in the behavior when manually entering a date and when using the calendar. I reported this to our developers, however it should be carefully evaluated before deciding whether the time should always be persisted or always discarded, as it might be a breaking change for some of our users.
In the current scenario I could recommend persisting the time portion manually as a workaround. Here is a small example that demonstrates such behavior.

As a sign of appreciation for bringing this to our attention I have updated your Telerik points.

Regards,
Alexander Popov
Telerik

[Iwhp]

This is definitely a bug. And since we are in 2016, I would have assumed that this has been fixed. But it is still a big mess with the KendoUI DatePicker/DateTimePicker, handling UTC times.
Please provide a GOOD solution for this and not providing endless work arounds. This should just work out of the box!

Hope that you make a big step forward here.

Thankx! Harry

[Vladimir Iliev]

Hi Harry,

Our dev team decided to not change that behavior back in 2013 as it would be breaking change for some of our clients. The reason for the difference between entering the date manually and selecting it in the DatePicker Calendar is the following:

• When typing date: The date string is always parsed by the the first date format that matches it. In case of the DatePicker widget this format would be without time part.
• When selecting date: The Calendar popup is just a selection tool - when selecting a date this is taken into account and the time portion of the previous date is used.

If the time portion is relevant to your business logic, then I would suggest you use either DateTimePicker or DatePicker format that contains time portion. Thus the parser will be able to persist the time.

Regards,
Vladimir Iliev
Telerik

 

 

[Ramesh]

Dear Support, 

We are still facing the same issue when using the DateTimePicker. 

As mentioned by David, we are also using UTC dates from the server and when binding to the Grid, it shows related to local timezone of the client which is correct in fact. But when editing, the DateTimePicker shows UTC time (please refer the attached image). For info, we are using grid popup edit dialog with kendo DateTimePicker in the template.

Kindly help us with a workaround.

Your help will be much appreciated 

Thanks

Ramesh R  

[Eyup]

Hello Ramesh,

 

Generally, you can cast your vote for this item:

https://feedback.telerik.com/kendo-jquery-ui/1432421-convert-grid-filter-date-field-to-utc

And for this case, try the suggestions provided by Viktor:
https://feedback.telerik.com/kendo-jquery-ui/1358428-support-binding-of-datetimepicker-to-type-datetimeoffset

If this does not work, the mentioned article remains the only possible option:
https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/how-to/editing/utc-time-on-both-server-and-client

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik