how can i format jquery datepicker as "25-JAN-2009"

Question

I would have thought this was:

.datepicker({ dateFormat: 'dd-mmm-yyyy' });

for month, I get some number that I don't understnad where they are coming from?

Answer 1

According to the documentation, a single M is "Month name short" and "yy" is "Four Digit Year."

dd-M-yy

Answer 2

This is a case where looking into the documentation is most helpful:

*  d - day of month (no leading zero)
* dd - day of month (two digit)
* o - day of the year (no leading zeros)
* oo - day of the year (three digit)
* D - day name short
* DD - day name long
* m - month of year (no leading zero)
* mm - month of year (two digit)
* M - month name short
* MM - month name long
* y - year (two digit)
* yy - year (four digit)
* @ - Unix timestamp (ms since 01/01/1970)
* '...' - literal text
* '' - single quote
* anything else - literal text 

Answer 3

You want:

$('.selector').datepicker({ dateFormat: 'dd-M-yy' });

See the docs.

The date format strings are somewhat non-standard:

d - day of month (no leading zero)
dd - day of month (two digit)
o - day of the year (no leading zeros)
oo - day of the year (three digit)
D - day name short
DD - day name long
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
y - year (two digit)
yy - year (four digit)
@ - Unix timestamp (ms since 01/01/1970)
'...' - literal text
'' - single quote
anything else - literal text

Answer 4

The correct way is dd-M-yy

Alternatively you can use the monthNamesShort option for custom names ..

Answer 5

If you are using AUI Datepicker / Datepicketselect components then dateFormat usage is a bit different.

for eg: if you want to display 01-Jan-2014, you will have to use dateFormat:'%d-%b-%Y'

following is the documentation that explains different formats: http://alloyui.com/versions/1.5.x/api/classes/DataType.Date.html

My working code: (on Liferay with AUI)

<div id="myDatepicker"></div>
  <input type="text" name="myDateValue" id="myDateValue" size="9" /> 

<aui:script>
  AUI().use('aui-datepicker', function(A) {
     new A.DatePickerSelect(
       {
         appendOrder: ['d', 'm', 'y'],
        calendar: {
        dateFormat: '%d-%b-%Y'
    },
    boundingBox: '#myDatepicker',
    trigger: '#myDateValue'
  }
).render();
}
);
</aui:script>