Timezone Issue

[Douglas]

Hi,

We are observing the following issue related to the time differences between our MVC app and a Kendo DatePicker. The web server is running in UTC+0. The web clients are running in different time zones (UTC+1, UTC+3, UTC-5, etc.)

The web page contains a Kendo date picker (no time portion) where user selects a single day or a month. Behind the scenes The date is sent in an AJAX request using full Date objects which contain the time and timezone information. 

We are only interested in the date portion irrespective of the time zone that client is in. When a user selects a date/month we want to receive a C#
DateTime object in the local server time.

For example:

User is in UTC+1 and selects ‘01/07/2013’ 
The actual C# DateTime object is instantiated as ‘30/06/2013 23:00’
We expect to get ‘01/07/2013 00:00:00’

We are currently using the following setting in Global.asax :

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandliig = Newtonsoft.Json.DateTimeZoneHandling.Local;

Could you please advise?

[Daniel]

Hello,

How are you posting the data? Could you provide the code you are using? If the date is posted as form data then it should be the same on the server. If you are posting the data as JSON then the local date will be converted to UTC by the JavaScript Date toJSON method in which case you should you should convert the date to string before the request.

Regards,
Daniel
Telerik

[Douglas]

Hi Daniel,

We have the date picker bound to a model. We retrieve the date value

newVersion.AgreementStart = header.get("AgreementStart")

and then POST the JSON to Web API 

$.ajax({type: 'POST', contentType: "application/json", data: JSON.stringify(newVersion)..

I think i see what you mean about converting the date to a string before being sent. We would manually remove the client offset and update the model value to be a string, correct? e.g. to get UTC

newVersion.Header.AgreementEnd = new Date(newVersion.Header.AgreementEnd.getTime() - newVersion.Header.AgreementEnd.getTimezoneOffset()*60000);

I think this would work in this instance but the issue also extends to our grids where we don't explicitly make an ajax request, but just call saveChanges() on the datasource. Would we have to  attach to a datasource event and remap all date fields manually?

Thanks,
Douglas

[Douglas]

I see my example isn't actually converting to a string, but i guess it effectively does the same thing by adjusting the value so it parsed on the .NET as the DateTime we want.

[Daniel]

Hello again,

In that case you should convert the date to a string: 

newVersion.AgreementStart = kendo.toString(header.get("AgreementStart"), "u");

Another option would be to override the default toJSON method

Date.prototype.toJSON = function () {
    return kendo.toString(this, "u");
};

As for the Grid - if you are using the MVC Grid then the data will be sent as form data and no conversion
should be performed when posting the values. If you are using the JavaScript initialization then you should use the parameterMap function to serialize the data as needed.

 Regards,
Daniel
Telerik

[Maurycy]

Hi,

In order to resolve this issue we have overriden ReadJson and WriteJsonin from base DateTimeConverterBase to not include timezone information in NoZoneDateTimeConverter class
 
In Global.asax.cs we have added
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.Converters.Add(new NoZoneDateTimeConverter());

On JavaScript side we have added
Date.prototype.toJSON = function ()
{
    return kendo.toString(this, "yyyy-MM-ddTHH:mm:ss");
}; 

Thanks,
Maurycy.

[Leon]

Can you provide your code for your NoDateTimeConverter(), complete with a working example if possible?  We have no timezone information on the date/time values because the data is imported from an external system.  We need date/times to be displayed "as-is", regardless of the client's timezone.

[Douglas]

Hi Leon,

I can't provide you with a working example but i can give you the code we added.

In Global.asax.cs we have

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.Converters.Add(new NoZoneDateTimeConverter());

Where NoZoneDateTimeConverter.cs is

public class NoZoneDateTimeConverter : DateTimeConverterBase
{
    public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)
    {
        if(reader.Value!=null)
            return (DateTime)reader.Value;
        return null;
    }

    public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
    {
        writer.WriteValue(((DateTime)value).ToString("yyyy-MM-ddTHH:mm:ss"));
    }
}

and as Maurycy mentioned above we have also overridden Date toJSON in our JavaScript

Date.prototype.toJSON = function ()
{
    return kendo.toString(this, "yyyy-MM-ddTHH:mm:ss");
};

Hope this helps,
Douglas

[Leon]

Where do I put the Date toJSON javascript?  Do I put this in each module that use a date?  Note: I am using MVC 4 C#.

Date.prototype.toJSON = function ()
{
    return kendo.toString(this, "yyyy-MM-ddTHH:mm:ss");
};

[Douglas]

You can put it anywhere as long as it is executed after kendo is loaded and before you make the ajax request that includes the date.

For test purposes I guess you could just put it in a <script> block inside the <head> tag of _Layout.cshtml after kendo is loaded.

[Leon]

I cannot get this solution to work.  My code never calls the ReadJson and WriteJson methods in the NoZoneDateTimeConverer class.  Yes, I did put the line in to the Application_Start method of my Global.asax.

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.Converters.Add(new NoZoneDateTimeConverter());

[Douglas]

Try adding the following lines to your Global.asax above that one if they are not already there.  

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.DateFormatHandling = Newtonsoft.Json.DateFormatHandling.IsoDateFormat;
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Local;