A date-picker of jQuery UI is used to provide a calendar to the user to select the date from a Calendar. This date picker usually connected to a textbox so user selection of date from the calendar can be transferred to the textbox.
We will use the CDN link for different libraries and styles. To display any jQuery UI widget, we have to use the link of jQuery and jQuery UI. We will also use style property and used the theme Cupertino for our calendar. You can change the theme to match your style requirements.
Example 1: This example display a date picker.
Default Date Selected: By default today’s date is selected in the calendar. However, we can change the default date by assigning the value to the default date.
Managing the date format: While displaying the calendar we can manage the date format. We can use the following jQuery code in the script section to get the result.
Managing the Weekday: By default, the first day of the week is displayed from Sunday ( firstDay=0 ). We can change the starting day by changing the value of firstDay.
Updating Month and Year: Based on our requirement we can add options for the users to select Month and Year.
Maximum and Minimum dates to Select: We can restrict the user selection of Dates from the calendar by assigning a Maximum and Minimum Date value.
- How to change an element color based on value of the color picker value using onclick?
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.support Property
- jQuery | jQuery.fx.off Property
- jQuery | jquery Property
- ES6 | Date
- PHP | Date and Time
- How to add days to $Date in PHP?
- HTTP headers | Date
- How to check whether an object is a date?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.