Description: Select a date from a popup or inline calendar Show
QuickNavExamplesOptionsMethodsEventsThe jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span. Keyboard interactionWhile the datepicker is open, the following key commands are available:
Utility functions$.datepicker.setDefaults( options )Change the default options for all date pickers. Use the Code examples: Set all date pickers to open on focus or a click on an icon.
Set all date pickers to have French text.
$.datepicker.formatDate( format, date, options )Format a date into a string value with a specified format. The format can be combinations of the following:
There are also a number of predefined standard date formats available from
Code examples: Display the date in ISO format. Produces "2007-01-26".
Display the date in expanded French format. Produces "Samedi, Juillet 14, 2007".
$.datepicker.parseDate( format, value, options )Extract a date from a string value with a specified format. The format can be combinations of the following:
A number of exceptions may be thrown:
Code examples: Extract a date in ISO format.
Extract a date in expanded French format.
$.datepicker.iso8601Week( date )Determine the week of the year for a given date: 1 to 53. This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4. This means that up to three days from the previous year may be included in the of first week of the current year, and that up to three days from the current year may be included in the last week of the previous year. This function is the default implementation for the Code examples: Find the week of the year for a date.
$.datepicker.noWeekendsSet as beforeShowDay function to prevent selection of weekends. We can provide the Code examples: Set the DatePicker so no weekend is selectable
LocalizationDatepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g., The You can restore the default localizations with:
And can then override an individual datepicker for a specific locale:
ThemingThe datepicker widget uses the jQuery UI CSS framework to style its look and feel. If datepicker specific styling is needed, the following CSS class names can be
used for overrides or as keys for the
If the
Dependencies
Additional Notes:
OptionsaltFieldDefault: An input element that is to be updated with the selected date from the datepicker. Use the Code examples: Initialize the datepicker with the
Get or set the
altFormatDefault: The Code examples: Initialize the datepicker with the
Get or set the
appendTextDefault: The text to display after each date field, e.g., to show the required format. Code examples: Initialize the datepicker with the
Get or set the
autoSizeDefault: Set to Code examples: Initialize the datepicker with the
Get or set the
beforeShowDefault: A function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed. beforeShowDayDefault: A function that takes a date as a parameter and must return an array with:
The function is called for each day in the datepicker before it is displayed. buttonImageDefault: A URL of an image to use to
display the datepicker when the Code examples: Initialize the datepicker with the
Get or set the
buttonImageOnlyDefault: Whether the button image should be rendered by itself instead of inside a button element. This option is only relevant if the Code examples: Initialize the datepicker with the
Get or set the
buttonTextDefault: The text to display on the trigger button. Use in conjunction with the Code examples: Initialize the datepicker with the
Get or set the
calculateWeekDefault: A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year. Code examples: Initialize the datepicker with the
Get or set the
changeMonthDefault: Whether the month should be rendered as a dropdown instead of text. Code examples: Initialize the datepicker with the
Get or set the
changeYearDefault: Whether the year should be rendered as a dropdown instead of text. Use the Code examples: Initialize the datepicker with the
Get or set the
closeTextDefault: The text to display for the close link. Use the Code examples: Initialize the datepicker with the
Get or set the
constrainInputDefault: When Code examples: Initialize the datepicker with the
Get or set the
currentTextDefault: The text to display for the current day link. Use the Code examples: Initialize the datepicker with the
Get or set the
dateFormatDefault: The format for parsed and displayed dates. For a full list of the possible formats see the Code examples: Initialize the datepicker with the
Get or set the
dayNamesDefault: The list of long day names, starting from Sunday, for use as requested via the Code examples: Initialize the datepicker with the
Get or set the
dayNamesMinDefault: The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. Code examples: Initialize the datepicker with the
Get or set the
dayNamesShortDefault: The list of abbreviated day names, starting from Sunday, for use as requested via the Code examples: Initialize the datepicker with the
Get or set the
defaultDateDefault: Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current Multiple types supported:
Code examples: Initialize the datepicker with the
Get or set the
durationDefault: Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast"). Code examples: Initialize the datepicker with the
Get or set the
firstDayDefault: Set the first day of the week: Sunday is Code examples: Initialize the datepicker with the
Get or set the
gotoCurrentDefault: When Code examples: Initialize the datepicker with the
Get or set the
hideIfNoPrevNextDefault: Normally the previous and next links are disabled when not applicable (see the Code examples: Initialize the datepicker with the
Get or set the
isRTLDefault: Whether the current language is drawn from right to left. Code examples: Initialize the datepicker with the
Get or set the
maxDateDefault: The maximum selectable date. When set to Multiple types supported:
Code examples: Initialize the datepicker with the
Get or set the
minDateDefault: The minimum selectable date. When set to Multiple types supported:
Code examples: Initialize the datepicker with the
Get or set the
monthNamesDefault: The list of full month names, for use as requested via the Code examples: Initialize the datepicker with the
Get or set the
monthNamesShortDefault: The list of abbreviated month names, as used in the month header on each datepicker and as requested via the Code examples: Initialize the datepicker with the
Get or set the
navigationAsDateFormatDefault: Whether the Code examples: Initialize the datepicker with the
Get or set the
nextTextDefault: The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon. Code examples: Initialize the datepicker with the
Get or set the
numberOfMonthsDefault: The number of months to show at once. Multiple types supported:
Code examples: Initialize the datepicker with the
Get or set the
onChangeMonthYearDefault: Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. onCloseDefault: Called when the datepicker is closed,
whether or not a date is selected. The function receives the selected date as text ( onSelectDefault: Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. onUpdateDatepickerDefault: Called when the datepicker widget's DOM is updated. The function receives the datepicker instance as the only parameter. prevTextDefault: The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon. Code examples: Initialize the datepicker with the
Get or set the
selectOtherMonthsDefault: Whether days in other months shown before or after the current month are selectable. This only applies if the Code examples: Initialize the datepicker with the
Get or set the
shortYearCutoffDefault: The cutoff year for determining the century for a date (used in conjunction with Multiple types supported:
Code examples: Initialize the datepicker with the
Get or set the
showAnimDefault: The name of the animation used to show and hide the datepicker. Use Code examples: Initialize the datepicker with the
Get or set the
showButtonPanelDefault: Whether to display a button pane underneath the calendar. The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker. The buttons' text can be customized using the Code examples: Initialize the datepicker with the
Get or set the
showCurrentAtPosDefault: When displaying multiple months via the Code examples: Initialize the datepicker with the
Get or set the
showMonthAfterYearDefault: Whether to show the month after the year in the header. Code examples: Initialize the datepicker with the
Get or set the
showOnDefault: When the datepicker should appear. The datepicker can appear when the field receives focus ( Code examples: Initialize the datepicker with the
Get or set the
showOptionsDefault: If using one of the jQuery UI effects for the Code examples: Initialize the datepicker with the
Get or set the
showOtherMonthsDefault: Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the Code examples: Initialize the datepicker with the
Get or set the
showWeekDefault: When Code examples: Initialize the datepicker with the
Get or set the
stepMonthsDefault: Set how many months to move when clicking the previous/next links. Code examples: Initialize the datepicker with the
Get or set the
yearRangeDefault: The range of years displayed in the year drop-down: either relative to today's year ( Code examples: Initialize the datepicker with the
Get or set the
yearSuffixDefault: Additional text to display after the year in the month headers. Code examples: Initialize the datepicker with the
Get or set the
Methodsdestroy()Returns: jQuery (plugin only)Removes the datepicker functionality completely. This will return the element back to its pre-init state.
Code examples: Invoke the destroy method:
dialog( date [, onSelect ] [, options ] [, pos ] )Returns: jQuery (plugin only)Opens the datepicker in a dialog box.
Code examples: Invoke the dialog method:
getDate()Returns: DateReturns the current date for the datepicker or
Code examples: Invoke the getDate method:
hide()Returns: jQuery (plugin only)Close a previously opened date picker.
Code examples: Invoke the hide method:
isDisabled()Returns: BooleanDetermine whether a date picker has been disabled.
Code examples: Invoke the isDisabled method:
option( optionName )Returns: ObjectGets the value currently associated with the specified Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example,
Code examples: Invoke the method:
option()Returns: PlainObjectGets an object containing key/value pairs representing the current datepicker options hash.
Code examples: Invoke the method:
option( optionName, value )Returns: jQuery (plugin only)Sets the value of the datepicker option associated with the specified Note: For options that have objects as their value, you can set the value of just one
property by using dot notation for
Code examples: Invoke the method:
option( options )Returns: jQuery (plugin only)Sets one or more options for the datepicker.
Code examples: Invoke the method:
refresh()Returns: jQuery (plugin only)Redraw the date picker, after having made some external modifications.
Code examples: Invoke the refresh method:
setDate( date )Returns: jQuery (plugin only)Sets the date for the datepicker. The new date may be a
Code examples: Invoke the setDate method:
show()Returns: jQuery (plugin only)Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.
Code examples: Invoke the show method:
Example:A simple jQuery UI Datepicker.
Demo:How do I change the date format to yyyy mm dd in HTML input?To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.
How do I change the Datepicker format?An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field.
How do I change Datepicker format from DD MM to YYYY?The jQuery DatePicker plugin supports multiple Date formats and in order to set the dd/MM/yyyy Date format, the dateFormat property needs to be set. The following HTML Markup consists of a TextBox which has been made Read Only.
How do I make a date picker in HTML?<input type="date"> <input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time.
|