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
|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 WindowGive 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 DatepickerGive 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 SettingGive 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.