Post
Ask Question

Localization Of jQuery Datepicker

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. );  
  6.   
  7. $("#calendar").datepicker(options);  
Putting all together, here is the complete code: 
  1. <!doctype html>  
  2. <html lang="en">  
  3.   
  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() {  
  13.   
  14.             var userLang = navigator.language || navigator.userLanguage;  
  15.   
  16.             var options = $.extend({}, // empty object    
  17.                 $.datepicker.regional[userLang], {  
  18.                     dateFormat: "mm/dd/yy"  
  19.                 } // your custom options    
  20.             );  
  21.   
  22.             $("#calendar").datepicker(options);  
  23.         });  
  24.     </script>  
  25. </head>  
  26.   
  27. <body>  
  28.     <div class="container">  
  29.         <h3>JQuery UI Datepicker Localization</h3>  
  30.         <div id="calendar"> </div>  
  31.     </div>  
  32. </body>  
  33.   
  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.


Similar Articles