How to set locale format from datepicker?

Mediator picture Mediator · Dec 21, 2012 · Viewed 43.7k times · Source

How can I set the date format in jQuery UI's datepicker according to the user's locale?

I get source html:

<script type="text/javascript">
    $(function() {
        $(".datefield2").datepicker($.datepicker.regional['de']);
    });
</script>
<form action="/Home/TestDate" method="post">    <input class="datefield2 hasDatepicker valid" name="date" value="21.12.2012" type="text" id="date">
    <input type="submit" value="send">
</form>

If a select a date in the datepicker I get 12/21/2012, however I need 21.12.2012.

Answer

Gabriele Petrioli picture Gabriele Petrioli · Dec 21, 2012

Use the dateFormat option to change to a custom format

$(function() {
    $(".datefield2").datepicker($.datepicker.regional['de']);
    $(".datefield2").datepicker('option','dateFormat','dd.mm.yy');
});

The real issue is that you need to manually include the localization files.

They can be found at https://github.com/jquery/jquery-ui/tree/master/ui/i18n
The one specific for german is https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-de.js

Demo (with full localization) can be seen at http://jsfiddle.net/gaby/h07ny9ep/