Search within TutorialsPark

jQuery UI : Datepicker - Date Selection


Learn how to use jQuery UI Date Picker Widget to manage date Selection Process


jQuery UI : DatePicker Widget

The jQuery UI DatePicker Widget can used to select date with filters over range of date available for selection.

The table below defines a list of settings that are used to apply selection contraints on date.


Table : jQuery UI Basic datepicker Settings

Settings Description
changeMonth When set to true, the datepicker widget allows direct navigation to a month. Default value is false
changeYear When set to true, the datepicker widget allows direct navigation to a year.
contrainInput When set to true, puts a limit to characters within the input element.Default is true
hideIfNoPrevNext To hide the previous/next links when not needed, instead of disabling them.
maxDate To set the maximum date that can be selected.The default is to allow user to select any date.
minDate To set the minimum date that can be selected.The default is to allow the user to select any date.
numberOfMonths To set the number of months displayed by the datepicker.The default value is 1
showCurrentAtPos To set the position of the current month in a multi-month datepicker. Default is 0
stepMonths To set how many months that the navigation jumps within previous and next months
yearRange To set the range of the years in the year dropdown.

jQuery UI DatePicker : Date Range and Input Character Limit.

jQuery UI Datepicker setting of constraintInput is used to restrict the characters to be entered within the input element, within the valid date Range.

The range of dates can be set using maxDate and minDate setting, the dates can in form of object, number of days, or a relative date String.

Example: jQuery UI DatePicker- Applying Range and Input Character Limit.

Give it a TRY! » Note:The values of maxDate and minDate specifies the number(+5 and -5)of days relative to today.


jQuery UI DatePicker : Creating a Delay Window

jQuery UI DatePicker Widget can be made to insert a delay window in the datepicker, thus preventing user from selecting any date within the set delay.

In the demo below, we set the value of minDate to +10, thus any date that occurs sooner than 10 days from the current date cannot be selected.

Example: jQuery UI DatePicker - Creating a Delay Window

Give it a TRY! » Note: The no value for maxDate, thus any future date after 10 days from current date can be selected.


jQuery UI DatePicker : Creating a Multimonth Datepicker

The jQuery UI Datepicker Widget allows you to set the number of months that are displayed to the user in the date picker pop-up using numberOfMonth Setting

Values for the setting can be specified using a two-element array, which sets the size of a grid of Months in the datepicker pop-up.

Example: jQuery UI Datepicker - Multimonth Datepicker

Give it a TRY! » Note: The two element array [1,2] creates three calender boxes.


jQuery UI Datepicker: Using the showCurrentAtPos Setting

jQuery UI Datepicker widget setting showCurrentAtPos is used to specify a zero-based index value to set the location where current month should be displayed.

Example: jQuery UI Datepicker showCurrentAtPos Setting

Give it a TRY! » Note: In the demo, current date is shown in the middle of the three months shown in the pop-up.


jQuery UI Datepicker: Direct Access to Months and Years

jQuery UI Datepicker widget settings of changeMonth and changeYear can be used to replace the month and year in the header of the datepicker with a dropdown

The setting yearRange is used to limit the range of the years that can be set, eg: the value -3:+3 means that the user can select three years back and two years from the current day.

Example: jQuery UI Datepicker Setting Month and Year Directly

Give it a TRY! » Note:The limit of year is -3 and +3 from the current year.