Open In App

How to create UI Datepicker using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:




<!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>  


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



Last Updated : 27 Apr, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads