Using UTC time on both client and server sides.

Thread is closed for posting
1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 20 Nov 2012 Link to this post

    Requirements

    Kendo UI Suite and Version

    2014.1.528

    jQuery Version

    1.9.1           

    Supported Browsers and Platforms

    All supported by Kendo UI 

    Components/Widgets used 

    Grid

     ASP.NET MVC Version
     4.0

    PROJECT DESCRIPTION 

    This project shows how to keep a DateTime property in UTC format on both server and client sides when using a Grid with Ajax Binding and editing.

    Every time a date is being retrieved from the database or received from the client, the DateTime Kind property is left unspecified. The .NET framework implicitly converts such dates to local format.

    Similar thing happens on the client side. Browsers convert all dates according to local time when the Date.

    For example when you create a JavaScript date like this new Date(1353397262112) different browsers which machines use different TimeZones will show different string representations of that Date.

    So in order to keep time in UTC, explicit transformation should be applied to the dates on both client and server sides.

    Hence there are two steps to be covered:


    1. Use a ViewModel with setter and getter that explicitly set the DateTime Kind to UTC.
      private DateTime birthDate;
      public DateTime BirthDate
      {
          get { return this.birthDate; }
          set
          {
              this.birthDate = new DateTime(value.Ticks, DateTimeKind.Utc);
          }
      }

    2. Use the requestEnd event of the DataSource to intercept and replace the incoming Date with the time difference of the current machine.
      e.g.
         
      var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
       
      function onRequestEnd(e) {
          if (e.response.Data && e.response.Data.length) {
              var persons = e.response.Data;
              if (this.group().length) {
                  for (var i = 0; i < persons.length; i++) {
                      var gr = persons[i];
                      if (gr.Member == "BirthDate") {
                          gr.Key = gr.Key.replace(/\d+/,
                              function (n) { return parseInt(n) + offsetMiliseconds }
                          );
                      }
                      addOffset(gr.Items);
                  }
              } else {
                  addOffset(persons);
              }
       
          }
      }
       
      function addOffset(persons) {
          for (var i = 0; i < persons.length; i++) {
              persons[i].BirthDate = persons[i].BirthDate.replace(/\d+/,
                  function (n) { return parseInt(n) + offsetMiliseconds }
              );
          }
      }

        
Back to Top