How to create UI Datepicker using jQuery ? ❤️

Localization means browser to display data in a different languages as per browser setting or manual setting inside the application. To implement jQuery UI Datepicker to display in different languages as per browser settings follow the steps:

Approach:

Add the following JavaScript references.

<script src= 
    "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
</script>       
  
<script src= 
    "http://code.jquery.com/ui/1.11.4/jquery-ui.js"> 
</script>     
    
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" 
      rel="stylesheet" type="text/css" />    
  
<script src= 
    "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"> 
</script>  

Fetch browser language version using JavaScript. Here is the code:
```
var userLang = navigator.language || navigator.userLanguage;
```

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).

var options = $.extend( 
    {},  // empty object   
    $.datepicker.regional[userLang], // Dynamically   
    { dateFormat: "mm/dd/yy" } // your custom options   
); 
  
$("#calendar").datepicker(options); 

Example:

<!doctype html>   
<html lang="en">   
    
<head>   
    <title>Localization JQuery UI Datepicker </title>   
    <meta charset="utf-8">   
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
    </script>   
    <script src= 
"http://code.jquery.com/ui/1.11.4/jquery-ui.js"> 
    </script>   
    <link href= 
"http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" 
          rel="stylesheet" type="text/css" />   
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"> 
    </script>   
    <script type="text/javascript">   
        $(document).ready(function() {   
    
            var userLang = navigator.language || navigator.userLanguage;   
    
            var options = $.extend({}, // empty object     
                $.datepicker.regional[userLang], {   
                    dateFormat: "mm/dd/yy"   
                } // your custom options     
            );   
    
            $("#calendar").datepicker(options);   
        });   
    </script>   
</head>   
    
<body>   
    <div class="container">   
        <h3>JQuery UI Datepicker Localization</h3>   
        <div id="calendar"> </div>   
    </div>   
</body>   
    
</html>   

Let’s see the following figures how it is showing when the language change:

Output 1: When changing regional language as English using “en-US” in the following code:

var options = $.extend(         
    {},  // empty object         
    $.datepicker.regional["en-US"], // Dynamically         
    { dateFormat: "mm/dd/yy"} // your custom options     
);   

Output 2: When changing regional language as Hindi using “hi” in the following code:

var options = $.extend(         
    {},  // empty object         
    $.datepicker.regional["hi"], // Dynamically         
    { dateFormat: "mm/dd/yy"} // your custom options     
);   

You can use regional language code as per your need from the following link : List of ISO 639-1 codes

How to create UI Datepicker using jQuery ?

Contact Us