How to set locale format from datepicker?

Question

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.

http://api.jqueryui.com/datepicker/#option-dateFormat – wirey00 Dec 21 '12 at 16:27 — wirey00, Dec 21 '12 at 16:27

Gabriele Petrioli · Answer 1 · 2018-10-23T09:42:20.017

17

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/

edited Oct 23 '18 at 09:42

answered Dec 21 '12 at 16:28

Gabriele Petrioli

191,379
34
261
317

1

the links and the demo are broken – Wolfgang Fahl Mar 18 '17 at 12:09

score 3 · Accepted Answer · edited Feb 11 '14 at 14:18

3

You can set the date format like this:

  $(".datefield2").datepicker({ "dateFormat": "dd.mm.yy"});

edited Feb 11 '14 at 14:18

dsimard

7,380
4
21
25

answered Dec 21 '12 at 16:27

Fiona - myaccessible.website

14,481
16
82
117

11

Why is this the accepted answer? The question is about setting the format to the **user's locale**, not to **dd.mm.yy**. When the OP says **21.12.2012**, it's just an example of format for germany. Did I misunderstood something? – Alisson Reinaldo Silva Jan 19 '16 at 01:04
There is any why by which we can set that to users locale settings. because my website run in whole world everyone wants date into their format. – Jenish Zinzuvadiya Jun 16 '16 at 12:08

score 0 · Answer 3 · edited May 23 '17 at 10:29

The JQuery documentation on the web seems to play hide&seek for where the i18n files for the datepicker are see e.g.

Where are the i18n files of jQuery UI datepicker >= 1.11.0

As of this posting the link:

https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/i18n/datepicker-de.js

seems to be valid. If i included it it didn't work by itself. I ended up using http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js which is not the same version as the 1.12 jquery I am using but it seems to work.

Please note I am using iso date format 2017-03-18 as yy-mm-dd here instead of the german locale style.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<script>
    $(function() {
        // https://stackoverflow.com/questions/494958/how-do-i-localize-the-jquery-ui-datepicker
        // https://stackoverflow.com/questions/13993619/how-to-set-locale-format-from-datepicker
        $(".datepicker").datepicker($.datepicker.regional['de']);
        $(".datepicker").datepicker('option','dateFormat','yy-mm-dd')
    });
</script>
</head>

score 0 · Answer 4 · answered Sep 20 '17 at 08:59

Since there doesn't seem to be a readily available locale information, I decided to use a bit different approach: I only use datepicker for choosing the date and retrieving the date as such from it, but for display I use an ordinary div and Date.toLocaleDateString(). This way I needn't bother with retrieving the format or worse yet - providing them all myself.

JSFiddle

HTML:

<div style="position:relative">
  <div id="date-text">

  </div>
  <div style="position: absolute; left: 0; top: 0">
    <input type="text" size="10" id="dt" style="opacity:0"/>
  </div>
</div>

JS:

var today = new Date();
today.setHours(0,0,0,0);
$("#dt").datepicker({defaultDate: today}).on('change', function() {
  $("#date-text").html($("#dt").datepicker("getDate").toLocaleDateString());
});
$("#date-text").html(today.toLocaleDateString());

How to set locale format from datepicker?

4 Answers4

Linked