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