5
votes

What is the preferred practice to handle DateTime format between client (javascript, ajax) and server (ASP MVC) for an international application?

Based on my research:

  • Server Format: yyyy-mm-dd
  • Client Format: yyyy-mm-dd

Overwrite the DateTime model binder of ASP MVC with custom model binder like

    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        try
        {
            var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
            return value.ConvertTo(typeof(DateTime), CultureInfo.InvariantCulture);
        }
        catch (Exception ex)
        {
            return new DateTime();
        }
    }

and format the date at client side by:

    function toISOString(d) {
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var date = d.getDate();
        return year + '-' + month + '-' + date;
    }

and one last question - having set the above, how the server check the DateTime offset or Timezone offset of the client if that has to take in to account before going into the application?

2
Please check Wikipedia's version of the specification ISO8601 to see how you are expected to deal with timezones when date and time value formatted according to ISO-8601 (UTC - 2013-07-06T02:28Z or with time zone ... 2013-07-06T09:28+07:00)Alexei Levenkov
ISO is the way to go. :) And if you plan on doing much else with date formatting on the client side, take a look at moment.js.Matt Johnson-Pint

2 Answers

5
votes

Outputting as an ISO string is the right way to go.

It will probably benefit you to use the JavaScript Date's toISOString. As not every browser supports it, you will want to supply it for browsers that do not:

if ( !Date.prototype.toISOString ) {
  ( function() {

    function pad(number) {
      var r = String(number);
      if ( r.length === 1 ) {
        r = '0' + r;
      }
      return r;
    }

    Date.prototype.toISOString = function() {
      return this.getUTCFullYear()
        + '-' + pad( this.getUTCMonth() + 1 )
        + '-' + pad( this.getUTCDate() )
        + 'T' + pad( this.getUTCHours() )
        + ':' + pad( this.getUTCMinutes() )
        + ':' + pad( this.getUTCSeconds() )
        + '.' + String( (this.getUTCMilliseconds()/1000).toFixed(3) ).slice( 2, 5 )
        + 'Z';
    };

  }() );
}

That is taken directly from MDN toISOString. I use it, and I hope that most others are too.

Note the Z stands for Zulu time (GMT). You can just use midnight (T00:00:00.000Z) to denote no time. Personally, I tend not to care about the milliseconds portion for what I do and I omit it (time resolution is fine down to the second).

As long as you standardize on the ISO format, then you can easily write simple parsers for both the server and client, if necessary.

As for the DateTime binding in MVC, you should then parse the incoming value using the methods described in this answer. The key to date/time parsing is consistency, and as long as you can depend on the ISO format (either with the T or using a space), then you can easily manage it.

0
votes

dateFormat(new Date(), 'Y-m-dTH:i:s.uZ'); // Returns 2013-06-07T04:22:26.755

https://gist.github.com/poying/5942293

var dateFormat = (function () {
    var keywords = {
        Y: 'getFullYear',
        m: 'getUTCMonth',
        d: 'getUTCDate',
        H: 'getUTCHours',
        i: 'getUTCMinutes',
        s: 'getUTCSeconds',
        u: 'getUTCMilliseconds'
    };
    function pad(number) {
        var r = String(number);
        if ( r.length === 1 ) {
            r = '0' + r;
        }
        return r;
    }
    return function dateFormat(date, format) {
        var str = '';
        var i, len = format.length;
        for (i = 0; i < len; i += 1) {
            if (keywords.hasOwnProperty(format[i])) {
                str += pad(Date.prototype[keywords[format[i]]].call(date));
            } else {
                str += format[i];
            }
        }
        return str;
    }
})();