How to create UI Datepicker using jQuery? Last Updated : 19 Jun, 2024 Comments Improve Suggest changes Like Article Like Report 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 );ApproachDefines 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: Figure 1: Calendar in EnglishExample 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> Output: Figure 2: Calendar in HindiNote: You can use regional language code as per your need from the following link List of ISO 639-1 codes Comment More infoAdvertise with us Next Article How to create UI Datepicker using jQuery? A ankita1721cs1217 Follow Improve Article Tags : JavaScript Web Technologies HTML JQuery Write From Home HTML-Misc jQuery-Misc JavaScript-Misc HTML-Questions +5 More Similar Reads How to make basic Datepicker using jQuery UI ? In this article, we will be creating a basic Datepicker using jQuery UI. For localization of Datepicker, refer this article. Approach: First, add jQuery UI scripts needed for your project. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script> <script sr 1 min read How to Change Date Format in jQuery UI DatePicker ? In this article, we are going to learn about the Datepicker in jQuery. jQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. jQuery is widely famous for its m 2 min read jQuery UI Datepicker currentText Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker currentText option is used to display the text for the current day link. Also, use showButtonPanel option to 1 min read jQuery UI Datepicker closeText option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI Datepickers widget allow users to enter dates easily and visually. In this article, we will see how to use closeText option 1 min read How to create a Datetime Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a Datetime input area using jQuery Mobile. Approach: Add jQuery mobile scripts needed for your project. <link rel=âstyleshee 1 min read How to Disable an datepicker in jQuery UI ? To disable a datepicker in jQuery UI we will be using disable() method which is discussed below: jQuery UI disable() method is used to disable the datepicker. Syntax: $( ".selector" ).datepicker( "disable" )Parameters: This method does not accept any parameters. Return values: This method returns an 1 min read How to destroy a datepicker in jQuery UI ? To destroy a datepicker in jQuery UI, we will be using destroy() method. jQuery UI destroy() method is used to remove the complete functionality of the datepicker(). Syntax: $(".selector" ).datepicker( "destroy" ) Parameters: This method does not accept any parameters. Return values: This method sim 1 min read How to create a Date Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a date input area using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstylesheetâ hr 1 min read jQuery UI Datepicker altField Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI datepickers widget allow users to enter dates easily and visually. In this article, we will see how to use altField option 1 min read jQuery UI Datepicker autoSize Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQueryUI allow users to enter dates easily and visually. In this article we will see how to use autoSi 2 min read Like