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:

20/10/2011 10:20 PM
10.20.2011 22:20

How do I do this (preferably with jQuery)?

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

Answer 2

The Date() object will get you the client time (live demo here):

var now=new Date();
alert(now.toLocaleString());

JS and jQuery don't have a built in format function. To format it differently use a function like format() (1.2kb) here and then the following code will produce a format like "10/10/2012 8:50pm" :

var now=new Date();    
alert( now.format("mm/dd/yy h:MM:ss TT") );

Answer 3

It's handy to know if a system uses day-month or month-day in its string methods, mostly to set the order of user inputs. toLocaleString is fine for displaying a known date- and it is international.

    Date.dmOrder=(function(){
      return Date.parse('2/6/2009')> Date.parse('6/2/2009');
    })()

if(Date.dmOrder)// ask for the date first
else // ask for the month first