Introduction

Sometimes we get a requirement to implement localization in our website. Localization means browser display data in different language as per browser setting or manual setting inside application. So this article helps to implement jQuery Datepicker to display in different languages as per browser settings. Before going through this article I would suggest you to visit here, that might help you more.

Let’s discuss how it can be implemented:

Step 1: Add the following JavaScript references.
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  3. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  4. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
Step 2: Fetch browser language version using JavaScript. Here is the code:
  1. var userLang = navigator.language || navigator.userLanguage;
Step 3: Add the following JavaScript code to implement localization in jQuery Datepicker. Here we are using extend property to set regional language as per the browser setting (Step 2).
  1. var options = $.extend(
  2. {}, // empty object
  3. $.datepicker.regional[userLang], // Dynamically
  4. { dateFormat: "mm/dd/yy"} // your custom options
  5. );
  7. $("#calendar").datepicker(options);
Putting all together, here is the complete code:
  1. <!doctype html>
  2. <html lang="en">
  4. <head>
  5. <title>Localization JQuery UI Datepicker </title>
  6. <meta charset="utf-8">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  8. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  10. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  14. var userLang = navigator.language || navigator.userLanguage;
  16. var options = $.extend({}, // empty object
  17. $.datepicker.regional[userLang], {
  18. dateFormat: "mm/dd/yy"
  19. } // your custom options
  20. );
  22. $("#calendar").datepicker(options);
  23. });
  24. </script>
  25. </head>
  27. <body>
  28. <div class="container">
  29. <h3>JQuery UI Datepicker Localization</h3>
  30. <div id="calendar"> </div>
  31. </div>
  32. </body>
  34. </html>
Let's see the following figures how it is showing when the language change:

Output 1: Here I changed regional language as Hindi using "hi" in the following code:
  1. var options = $.extend(
  2. {}, // empty object
  3. $.datepicker.regional["hi"], // Dynamically
  4. { dateFormat: "mm/dd/yy"} // your custom options
  5. );
Figure 1: Calendar in Hindi

Output 2: Here I changed regional language as English using "en-US" in the following code:
  1. var options = $.extend(
  2. {}, // empty object
  3. $.datepicker.regional["en-US"], // Dynamically
  4. { dateFormat: "mm/dd/yy"} // your custom options
  5. );
Figure 2: Calendar in English

Output 3: Here I changed regional language as French using "fr" in the following code:
  1. var options = $.extend(
  2. {}, // empty object
  3. $.datepicker.regional["fr"], // Dynamically
  4. { dateFormat: "mm/dd/yy"} // your custom options
  5. );
Figure 3: Calendar in French

In above example, I added regional as hard coded. You can use regional language as per your need from the following table:
Language Code
Arabic ar
Bulgarian bg
Chinese Simplified zh-CN
Czech (čeština) cs
Dutch (Belgium) nl-BE
Dutch (Nederlands) nl
English(Australia) en-AU
English(New Zealand) en-NZ
English(UK) en-GB
French(Français) fr
Georgian ge
German de
Greek (Ελληνικά) el
Hindi (हिंदी) hi
Hungarian hu
Indonesian id
Italian it
Japanese (日本語) ja
Korean ko
Malaysian ms
Norwegian no
Portuguese/Brazilian pt-BR
Portuguese pt
Romanian ro
Russian (Русский) ru
Spanish (Español) es
Tamil (தமிழ்) ta
Thai th
Turkish tr

Table 1: Languages with their code

Conclusion

In this article we discussed how to implement jQuery Datepicker with localization. Hope it will be helpful for you.