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 text-box 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.
<link href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’ rel=’stylesheet’>
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.
We have two calendars, one calendar is to choose the start date and the other one is to choose end date in the calendar. It can be used for hotel booking where we have to select check-in Date and check-out date. The following conditions must be met for such arrangements.
- Once the start date is selected, the end date can’t be before the start date
- Once the end date is selected, the start date can’t be after the end date
- End date can’t be changed to before start date
- Start date can’t be changed to after end date.
- Dates which can’t be selected should be disabled for selection in the above cases.
Interlocking two Datepickers
Before using two interlocked calendars we will learn how to set Minimum selectable date and Maximum selectable date.
minDate: Minimum Selectable date. maxDate: Maximum Selectable Date. There is one example at the end of the previous article on DatePicker. Here it is again.
Interlocking of two Calendars
Change function of Calendar:
We will be using the change function to trigger the event. We will set the minDate for the End Calendar whenever the change function of Start Calendar is triggered.
Similarly, we will set the maxDate for the Start Calendar when ever change function of End Calendar is triggered.
This method returns the selected date of the calendar. Here is an example
We will use this to get the dates selected by the user.
Now we will give the user two calendars to select the start date and end date.
- How to validate if input date (end date) in input field must be after a given date (start date) using express-validator ?
- How to validate if input date (start date) in input field must be before a given date (end date) using express-validator ?
- How to Design Color Picker using jQuery UI ?
- How to change an element color based on value of the color picker value using onclick?
- How to change an element color based on value of the color picker value on click?
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.fx.off Property
- jQuery | jQuery.support Property
- jQuery | jquery Property
- PHP | Date and Time
- PHP program to change date format
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.
Improved By : mayeshmohapatra