Polyfill for IE8 and the XPages REST service date format

In my previous post I talked about the date format coming from an XPages REST service – the ISO date format. Well it turns out that IE8 and below do not recognize this date format and will be very upset at you if you try and create a new Date() from it. (It actually return NaN because Dates are really numbers🙂 )

Example REST data

{
  "@entryid":"21-6CE8F65D7CB43A5185257C06000B8F00",
  "StartDate":"2013-07-01T01:19:19Z",
  "Form":"Position",
  "Title":"Worker"
}

new Date("2013-07-01T01:19:19Z") // NaN in IE8

So I searched the Google-webs and found a polyfill solution which will re-parse the ISO date format back into something all browsers will recognize. This is a necessary evil in my current application but if you do not have to support IE8 then don’t waste to computation.

Add the following code to your JS libraries and use the Date.fromISO() to crate your dates as stated in the original StackOverflow

/*
  http://stackoverflow.com/questions/11020658/javascript-json-date-parse-in-ie7-ie8-returns-nan
  In older browsers, you can write a function that will parse the string for you.
  This one creates a Date.fromISO method- if the browser can natively get the correct date from an ISO string, the native method is used.
  Some browsers got it partly right, but returned the wrong timezone, so just checking for NaN may not do.
  Polyfill:
*/
(function(){
    var D= new Date('2011-06-02T09:34:29+02:00');
    if(!D || +D!== 1307000069000){
        Date.fromISO= function(s){
            var day, tz,
            rx=/^(\d{4}\-\d\d\-\d\d([tT ][\d:\.]*)?)([zZ]|([+\-])(\d\d):(\d\d))?$/,
            p= rx.exec(s) || [];
            if(p[1]){
                day= p[1].split(/\D/);
                for(var i= 0, L= day.length; i<L; i++){
                    day[i]= parseInt(day[i], 10) || 0;
                };
                day[1]-= 1;
                day= new Date(Date.UTC.apply(Date, day));
                if(!day.getDate()) return NaN;
                if(p[5]){
                    tz= (parseInt(p[5], 10)*60);
                    if(p[6]) tz+= parseInt(p[6], 10);
                    if(p[4]== '+') tz*= -1;
                    if(tz) day.setUTCMinutes(day.getUTCMinutes()+ tz);
                }
                return day;
            }
            return NaN;
        }
    }
    else{
        Date.fromISO= function(s){
            return new Date(s);
        }
    }
})()
/* end Polyfill */

  http://stackoverflow.com/questions/11020658/javascript-json-date-parse-in-ie7-ie8-returns-nan

and if you need to use it – vote it up on SO !!

You could almost certainly correct this on the server by creating a custom column in your REST service to re-format the back end document date field and send out whatever format you wanted. If you are working with a JavaScript framework or front-end library I recommend against this because you really want your JSON to contain the correct date object. Especially in a localized application you are setting yourself up for unnecessary risk.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s