How format JavaScript Date with regard to the browser culture?

Question

I need to format the JavaScript Date object. It should display date and time in short format with regard to the culture that browser is using, for example:

2         


        

Answer 1

Browsers either use system settings for date formats, or use their own (often US–centric) settings.

There is a Date.prototype.toLocaleDateString() method that should return a date based on current system settings, however it's implementation dependent and completely unreliable due to being inconsistent between browsers.

e.g. for me on 13 December, 2011:

1. Safari returns 13 December 2001
2. Firefox 12/13/2011
3. Opera Tuesday December 13, 2011
4. Chrome Tuesday, December 13, 2011
5. IE 6 Tuesday, 13 December, 2011

So only Safari and IE actually use the system settings, it seems the developers of other browsers are either too lazy, indifferent or ignorant to accommodate non–US users.

An alternative is to either ask the user what format they prefer, or just use an unambiguous format, e.g. 13-Dec-2011 will be understood by everyone. If you really must use numbers only, then the ISO-8601 format should do fine: 2011-12-13 with the added benefit that it is simple to sort.

Some functions that print a short date in the above formats:

// format: 2011/12/5
function shortDate1(obj) {
  obj = obj || new Date();
  return obj.getFullYear() + '/' + (obj.getMonth() + 1) + '/' + obj.getDate();
}


// format: 2011/12/05 
// (padded single digit month and day)
function shortDate2(obj) {

  function z(n) {
    return (n < 10? '0' : '') + n;
  }

  obj = obj || new Date();
  return obj.getFullYear() + '/' + z(obj.getMonth() + 1) + '/' + z(obj.getDate());
}


// format: 15-Dec-2011
function shortDate3(obj) {

  obj = obj || new Date();

  function z(n) {
    return (n < 10? '0' : '') + n;
  }

  months = ['Jan','Feb','Mar','Apr','May','Jun',
            'Jul','Aug','Sep','Oct','Nov','Dec'];

  return [z(obj.getDate()),months[obj.getMonth()],obj.getFullYear()].join('-');
}