Categories:> JavaScript, jQuery, jQuery Snippets

Changing the date format of the jQuery UI datepicker

A lot of people have asked me recently how to change the date format of the jQuery UI datepicker from the US date format (mm/dd/yy) to the UK date format (dd/mm/yy). This is really simple once you know how:

<script type="javascript/text">
$(document).ready(function() {
    // datepicker with UK date format
    $(".cssselector").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>

You can replace ‘dd/mm/yy’ with a combination of any of the following shorthand codes for your own custom date format.

  • 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)
  • ! – Windows ticks (100ns since 01/01/0001)

So there you have it, easier than you thought. If you would like more information check out the official jQuery UI datepicker documentation.

Share

About Ross Gledhill See all posts by author

I’m Ross, a freelance web developer based in Glasgow, Scotland. The large majority of my freelance work usually involves WordPress, but I also have experience in iPhone & iPad apps and bespoke solutions.