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)?

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)?

• javascript
• date
• culture

• Preferably with jQuery? Why is that preferable? – Jared Farrish Commented Dec 12, 2011 at 2:56
• 1 Also, I think you're looking for the toLocale methods. – Jared Farrish Commented Dec 12, 2011 at 2:58
• There's a jquery plugin for that. But it has a dependency upon the jquery basic arithmetic plugin. – goat Commented Dec 12, 2011 at 3:36
• @JaredFarrish - Date.prototype.toLocaleString() is inconsistent across browsers and can't be used to reliably present dates based on local system settings. – RobG Commented Dec 12, 2011 at 4:35
• @chris so what is the name of the plugin? Could you give an example of usage? – IT Hit WebDAV Commented Dec 14, 2011 at 0:20

3 Answers 3

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

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") );

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