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:

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>  
<html lang="en">  
    
<head>  
    <title>Localization JQuery UI Datepicker </title>  
    <meta charset="utf-8">  
    <script src=
    </script>  
    <script src=
    </script>  
    <link href=
          rel="stylesheet" type="text/css" />  
    <script src=
    </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>  

chevron_right


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:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.