Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create UI Datepicker using jQuery ?

  • Last Updated : 27 Apr, 2020

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :