How to make basic Datepicker using jQuery UI ? Last Updated : 12 Jan, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> Example: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script> <script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> </script> <link href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script> $(function () { $("#datepicker").datepicker(); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html> Output: Comment More infoAdvertise with us Next Article jQuery UI Datepicker dialog() Method T taran910 Follow Improve Article Tags : JQuery jQuery-UI Similar Reads How to create UI Datepicker using jQuery? 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. 2 min read jQuery UI Datepicker widget() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. jQuery UI Datepicker widget allows users to enter dates easily and visually. In this article, we will use the jQuery UI Datepicker wi 1 min read How to open datetimepicker on textbox click using jQuery ? In this article, we will see how to set a datetimepicker to select a date and time on a textbox click or input element click using jQuery. Below approaches can be used to accomplish this task: Table of Content Using the datetimepicker plugin available in jQuery. Using the Bootstrap datetimepicker pl 3 min read jQuery UI Datepicker hide() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. jQuery UI Datepickers widget allows users to enter dates easily and visually. In this article, we will use the jQuery UI Datepicker h 1 min read jQuery UI Datepicker dialog() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget allows users to enter dates easily and visually. In this article, we will use jQuery UI Datepicker dialog 2 min read jQuery UI datepicker option() Method jQuery UI datepicker option(optionName, value) method is used to set the value of the button option associated with the specified optionName. Syntax: $( ".selector" ).datepicker( "option", "disabled", true )Parameters: optionName: Option to be checked.value: Value to be checkedReturn values: This me 1 min read Like