Timezone Issue

12 posts, 0 answers
  1. Douglas
    Douglas avatar
    10 posts
    Member since:
    Jan 2013

    Posted 16 Jul 2013 Link to this post

    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?
  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 18 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Douglas
    Douglas avatar
    10 posts
    Member since:
    Jan 2013

    Posted 18 Jul 2013 Link to this post

    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

  5. Douglas
    Douglas avatar
    10 posts
    Member since:
    Jan 2013

    Posted 18 Jul 2013 Link to this post

    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.
  6. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 22 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Maurycy
    Maurycy avatar
    1 posts
    Member since:
    Jan 2013

    Posted 28 Aug 2013 Link to this post

    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.
  8. Leon
    Leon avatar
    10 posts
    Member since:
    Aug 2012

    Posted 14 Feb 2014 in reply to Maurycy Link to this post

    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.
  9. Douglas
    Douglas avatar
    10 posts
    Member since:
    Jan 2013

    Posted 17 Feb 2014 in reply to Leon Link to this post

    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
  10. Leon
    Leon avatar
    10 posts
    Member since:
    Aug 2012

    Posted 17 Feb 2014 in reply to Douglas Link to this post

    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");
    };
  11. Douglas
    Douglas avatar
    10 posts
    Member since:
    Jan 2013

    Posted 17 Feb 2014 in reply to Leon Link to this post

    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.

  12. Leon
    Leon avatar
    10 posts
    Member since:
    Aug 2012

    Posted 17 Feb 2014 in reply to Douglas Link to this post

    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());
  13. Douglas
    Douglas avatar
    10 posts
    Member since:
    Jan 2013

    Posted 17 Feb 2014 in reply to Leon Link to this post

    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;
Back to Top
UI for ASP.NET MVC is VS 2017 Ready