ie8 Date() compatibility error

Question

I'm getting an error on ie8 for the following javascript:

<script type="text/javascript">
    //when html doc is all ready
    $(document).ready(function () {
        var socket = io.connect();
        var room = 'public';
        socket.emit('join', room);

        socket.on('message', function (data) {
            var output = '';
            output += '<div class="trace-content">';
            output += ' <div class="mname">' + data.name + '</div>';
            output += ' <div class="mdate">' + data.date + '</div>';
            output += ' <p class="mtext">' + data.message + '</p>';
            output += '</div>';

            $(output).prependTo('#traces');
        });

        $('button').click(function () {
            var date = new Date().toISOString();
           socket.emit('message', {
               name: $('#name').val(),
               message: $('#message').val(),
               date: date.slice(2,10) + ' ' + date.slice(11, 19)
           });
        });
    });
</script>

The problem seems to be in the line: var date = new Date().toISOString(); I'm having trouble pin pointing what exactly the problem is. Everything else seems to working fine; just that button click and the code following through. Any ideas?

Answer 1

IE8 doesn't support .toISOString(). You can use this code as a shim (from Mozilla) :

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';
        };       
    }() );
}

Answer 2

Of course you get an error http://kangax.github.com/es5-compat-table. Look for date.prototype.toISOString() polyfill in Google. Found this https://gist.github.com/1044533

From the gist:

// thanks to @fgnass and @subzey for their awesome golf skills
// annotation by @fgnass

function(a){
  a=this;
  return (
     1e3 // Insert a leading zero as padding for months < 10
     -~a.getUTCMonth() // Months start at 0, so increment it by one
     *10 // Insert a trailing zero as padding for days < 10
     +a.toUTCString() // Can be "1 Jan 1970 00:00:00 GMT" or "Thu, 01 Jan 1970 00:00:00 GMT"
     +1e3+a/1 // Append the millis, add 1000 to handle timestamps <= 999
     // The resulting String for new Date(0) will be:
     // "-1010 Thu, 01 Jan 1970 00:00:00 GMT1000" or
     // "-10101 Jan 1970 00:00:00 GMT1000" (IE)
   ).replace(
      // The two digits after the leading '-1' contain the month
      // The next two digits (at whatever location) contain the day
      // The last three chars are the milliseconds
      /1(..).*?(\d\d)\D+(\d+).(\S+).*(...)/,
     '$3-$1-$2T$4.$5Z')
}

Note: This might not be the most readable code or best example of polyfill but it seems to work according to the comments in the gist so it's a quick copy/paste solution.