How to create UI Datepicker using jQuery?

Last Updated : 19 Jun, 2024

To implement a jQuery UI Datepicker with localization, configure it to display dates in various languages based on either browser settings or application-specific preferences.

Syntax:

let userLang = navigator.language || navigator.userLanguage;
      let options = $.extend({}, // empty object    
                $.datepicker.regional[userLang], {
                dateFormat: "mm/dd/yy"
            } // your custom options    
            );

Approach

Defines the HTML structure with essential tags, Link necessary jQuery and jQuery UI libraries.
Retrieves the user's language preference using navigator.language or navigator.userLanguage.
Constructs an options object by extending default regional settings ($.datepicker.regional[userLang]).
Specifies dateFormat: "mm/dd/yy" for consistent date format across browsers.
Targets the <div id="calendar"> element to initialize the Datepicker widget. Configures the Datepicker with the options object to adapt to the user's language and date format preferences.

Example 1: The example shows the above-explained approach.

HTML

<!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 () {

            let userLang = navigator.language || navigator.userLanguage;

            let options = $.extend({},   
                $.datepicker.regional[userLang], {
                dateFormat: "mm/dd/yy"
            } 
            );

            $("#calendar").datepicker(options);
        });  
    </script>
</head>

<body>
    <div class="container">
        <h3>JQuery UI Datepicker Localization</h3>
        <div id="calendar"> </div>
    </div>
</body>

</html>

Output:

Example 2: The example shows UI Datepicker using jQuery in Hindi language.

HTML

<!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["hi"], 
                { dateFormat: "mm/dd/yy" }     
            );

            $("#calendar").datepicker(options);
        });


    </script>
</head>

<body>
    <div class="container">
        <h3>JQuery UI Datepicker Localization</h3>
        <div id="calendar"> </div>
    </div>
</body>

</html>