The 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 interaction
While the datepicker is open, the following key commands are available:
-
PAGE UP
: Move to the previous month. -
PAGE DOWN
: Move to the next month. -
CTRL
+PAGE UP
: Move to the previous year. -
CTRL
+PAGE DOWN
: Move to the next year. -
CTRL
+HOME
: Open the datepicker if closed. -
CTRL
/COMMAND
+HOME
: Move to the current month. -
CTRL
/COMMAND
+LEFT
: Move to the previous day. -
CTRL
/COMMAND
+RIGHT
: Move to the next day. -
CTRL
/COMMAND
+UP
: Move to the previous week. -
CTRL
/COMMAND
+DOWN
: Move the next week. -
ENTER
: Select the focused date. -
CTRL
/COMMAND
+END
: Close the datepicker and erase the date. -
ESCAPE
: Close the datepicker without selection.
Utility functions
$.datepicker.setDefaults( options )
Change the default options for all date pickers.
Use the option()
method to change options for individual instances.
Set all date pickers to open on focus or a click on an icon.
$.datepicker.setDefaults({ showOn: "both", buttonImageOnly: true, buttonImage: "calendar.gif", buttonText: "Calendar" });
Set all date pickers to have French text.
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$.datepicker.formatDate( format, date, options )
Format a date into a string value with a specified format.
The format can be combinations of the following:
- d - day of month (no leading zero)
- dd - day of month (two digit)
- o - day of the year (no leading zeros)
- oo - day of the year (three digit)
- D - day name short
- DD - day name long
- m - month of year (no leading zero)
- mm - month of year (two digit)
- M - month name short
- MM - month name long
- y - year (two digit)
- yy - year (four digit)
- @ - Unix timestamp (ms since 01/01/1970)
- ! - Windows ticks (100ns since 01/01/0001)
- '...' - literal text
- '' - single quote
- anything else - literal text
There are also a number of predefined standard date formats available from $.datepicker
:
- ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)
- COOKIE - 'D, dd M yy'
- ISO_8601 - 'yy-mm-dd'
- RFC_822 - 'D, d M y' (See RFC 822)
- RFC_850 - 'DD, dd-M-y' (See RFC 850)
- RFC_1036 - 'D, d M y' (See RFC 1036)
- RFC_1123 - 'D, d M yy' (See RFC 1123)
- RFC_2822 - 'D, d M yy' (See RFC 2822)
- RSS - 'D, d M y' (Same as RFC 822)
- TICKS - '!'
- TIMESTAMP - '@'
- W3C - 'yy-mm-dd' (Same as ISO 8601)
Display the date in ISO format. Produces "2007-01-26".
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );
Display the date in expanded French format. Produces "Samedi, Juillet 14, 2007".
$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 ), { dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, dayNames: $.datepicker.regional[ "fr" ].dayNames, monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, monthNames: $.datepicker.regional[ "fr" ].monthNames });
$.datepicker.parseDate( format, value, options )
Extract a date from a string value with a specified format.
The format can be combinations of the following:
- d - day of month (no leading zero)
- dd - day of month (two digit)
- o - day of year (no leading zeros)
- oo - day of year (three digit)
- D - day name short
- DD - day name long
- m - month of year (no leading zero)
- mm - month of year (two digit)
- M - month name short
- MM - month name long
- y - year (two digit)
- yy - year (four digit)
- @ - Unix timestamp (ms since 01/01/1970)
- ! - Windows ticks (100ns since 01/01/0001)
- '...' - literal text
- '' - single quote
- anything else - literal text
A number of exceptions may be thrown:
- 'Invalid arguments' if either format or value is null
- 'Missing number at position nn' if format indicated a numeric value that is not then found
- 'Unknown name at position nn' if format indicated day or month name that is not then found
- 'Unexpected literal at position nn' if format indicated a literal value that is not then found
- 'Invalid date' if the date is invalid, such as '31/02/2007'
Extract a date in ISO format.
$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" );
Extract a date in expanded French format.
$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", { shortYearCuroff: 20, dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, dayNames: $.datepicker.regional[ "fr" ].dayNames, monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, monthNames: $.datepicker.regional[ "fr" ].monthNames });
$.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 calculateWeek
option.
Find the week of the year for a date.
$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) );
$.datepicker.noWeekends
Set as beforeShowDay function to prevent selection of weekends.
We can provide the noWeekends()
function into the beforeShowDay
option which will calculate all the weekdays and provide an array of true
/false
values indicating whether a date is selectable.
Set the DatePicker so no weekend is selectable
$( "#datepicker" ).datepicker({ beforeShowDay: $.datepicker.noWeekends });
Localization
Datepicker 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., jquery.ui.datepicker-fr.js
for French. The desired localization file should be included after the main datepicker code. Each localization file adds its options to the set of available localizations and automatically applies them as defaults for all instances. Localization files can be found at https://github.com/jquery/jquery-ui/tree/master/ui/i18n.
The $.datepicker.regional
attribute holds an array of localizations, indexed by language code, with ""
referring to the default (English). Each entry is an object with the following attributes: closeText
, prevText
, nextText
, currentText
, monthNames
, monthNamesShort
, dayNames
, dayNamesShort
, dayNamesMin
, weekHeader
, dateFormat
, firstDay
, isRTL
, showMonthAfterYear
, and yearSuffix
.
You can restore the default localizations with:
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
And can then override an individual datepicker for a specific locale:
$( selector ).datepicker( $.datepicker.regional[ "fr" ] );
Theming
The 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:
-
ui-datepicker
: The outer container of the datepicker. If the datepicker is inline, this element will additionally have aui-datepicker-inline
class. If theisRTL
option is set, this element will additionally have a class ofui-datepicker-rtl
.-
ui-datepicker-header
: The container for the datepicker's header.-
ui-datepicker-prev
: The control used to select previous months. -
ui-datepicker-next
: The control used to select subsequent months. -
ui-datepicker-title
: The container for the datepicker's title containing the month and year.-
ui-datepicker-month
: The textual display of the month or a<select>
element if thechangeMonth
option is set. -
ui-datepicker-year
: The textual display of the year or a<select>
element if thechangeYear
option is set.
-
-
-
ui-datepicker-calendar
: The table that contains the calendar itself.-
ui-datepicker-week-end
: Cells containing weekend days. -
ui-datepicker-other-month
: Cells containing days that occur in a month other than the currently selected month. -
ui-datepicker-unselectable
: Cells containing days that are not selectable by the user. -
ui-datepicker-current-day
: The cell containing the selected day. -
ui-datepicker-today
: The cell containing today's date.
-
-
ui-datepicker-buttonpane
: The buttonpane that is used when theshowButtonPanel
option is set.-
ui-datepicker-current
: The button used to select today's date.
-
-
If the numberOfMonths
option is used to display multiple months at once, a number of additional classes are used:
-
ui-datepicker-multi
: The outermost container of a multiple month datepicker. This element can additionally have aui-datepicker-multi-2
,ui-datepicker-multi-3
, orui-datepicker-multi-4
class name depending on the number of months to display.-
ui-datepicker-group
: Individual pickers within the group. This element will additionally have aui-datepicker-group-first
,ui-datepicker-group-middle
, orui-datepicker-group-last
class name depending on its position within the group.
-
Dependencies
- UI Core
- Effects Core (optional; for use with the
showAnim
option)
- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
- This widget manipulates its element's value programmatically, therefore a native
change
event may not be fired when the element's value changes. - Creating a datepicker on an
<input type="date">
is not supported due to a UI conflict with the native picker.
""
altFormat
option to change the format of the date within this field. Leave as blank for no alternate field.Code examples:
Initialize the datepicker with the altField
option specified:
$( ".selector" ).datepicker({ altField: "#actualDate" });
Get or set the altField
option, after initialization:
// Getter var altField = $( ".selector" ).datepicker( "option", "altField" ); // Setter $( ".selector" ).datepicker( "option", "altField", "#actualDate" );
""
dateFormat
to be used for the altField
option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate
functionCode examples:
Initialize the datepicker with the altFormat
option specified:
$( ".selector" ).datepicker({ altFormat: "yy-mm-dd" });
Get or set the altFormat
option, after initialization:
// Getter var altFormat = $( ".selector" ).datepicker( "option", "altFormat" ); // Setter $( ".selector" ).datepicker( "option", "altFormat", "yy-mm-dd" );
""
Code examples:
Initialize the datepicker with the appendText
option specified:
$( ".selector" ).datepicker({ appendText: "(yyyy-mm-dd)" });
Get or set the appendText
option, after initialization:
// Getter var appendText = $( ".selector" ).datepicker( "option", "appendText" ); // Setter $( ".selector" ).datepicker( "option", "appendText", "(yyyy-mm-dd)" );
false
true
to automatically resize the input field to accommodate dates in the current dateFormat
.Code examples:
Initialize the datepicker with the autoSize
option specified:
$( ".selector" ).datepicker({ autoSize: true });
Get or set the autoSize
option, after initialization:
// Getter var autoSize = $( ".selector" ).datepicker( "option", "autoSize" ); // Setter $( ".selector" ).datepicker( "option", "autoSize", true );
null
null
-
[0]
:true
/false
indicating whether or not this date is selectable -
[1]
: a CSS class name to add to the date's cell or""
for the default presentation -
[2]
: an optional popup tooltip for this date
""
showOn
option is set to "button"
or "both"
. If set, the buttonText
option becomes the alt
value and is not directly displayed.Code examples:
Initialize the datepicker with the buttonImage
option specified:
$( ".selector" ).datepicker({ buttonImage: "/images/datepicker.gif" });
Get or set the buttonImage
option, after initialization:
// Getter var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" ); // Setter $( ".selector" ).datepicker( "option", "buttonImage", "/images/datepicker.gif" );
false
buttonImage
option has also been set.Code examples:
Initialize the datepicker with the buttonImageOnly
option specified:
$( ".selector" ).datepicker({ buttonImageOnly: true });
Get or set the buttonImageOnly
option, after initialization:
// Getter var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" ); // Setter $( ".selector" ).datepicker( "option", "buttonImageOnly", true );
"..."
showOn
option set to "button"
or "both"
.Code examples:
Initialize the datepicker with the buttonText
option specified:
$( ".selector" ).datepicker({ buttonText: "Choose" });
Get or set the buttonText
option, after initialization:
// Getter var buttonText = $( ".selector" ).datepicker( "option", "buttonText" ); // Setter $( ".selector" ).datepicker( "option", "buttonText", "Choose" );
jQuery.datepicker.iso8601Week
Code examples:
Initialize the datepicker with the calculateWeek
option specified:
$( ".selector" ).datepicker({ calculateWeek: myWeekCalc });
Get or set the calculateWeek
option, after initialization:
// Getter var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" ); // Setter $( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );
false
Code examples:
Initialize the datepicker with the changeMonth
option specified:
$( ".selector" ).datepicker({ changeMonth: true });
Get or set the changeMonth
option, after initialization:
// Getter var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" ); // Setter $( ".selector" ).datepicker( "option", "changeMonth", true );
false
yearRange
option to control which years are made available for selection.Code examples:
Initialize the datepicker with the changeYear
option specified:
$( ".selector" ).datepicker({ changeYear: true });
Get or set the changeYear
option, after initialization:
// Getter var changeYear = $( ".selector" ).datepicker( "option", "changeYear" ); // Setter $( ".selector" ).datepicker( "option", "changeYear", true );
"Done"
showButtonPanel
option to display this button.Code examples:
Initialize the datepicker with the closeText
option specified:
$( ".selector" ).datepicker({ closeText: "Close" });
Get or set the closeText
option, after initialization:
// Getter var closeText = $( ".selector" ).datepicker( "option", "closeText" ); // Setter $( ".selector" ).datepicker( "option", "closeText", "Close" );
true
true
, entry in the input field is constrained to those characters allowed by the current dateFormat
option.Code examples:
Initialize the datepicker with the constrainInput
option specified:
$( ".selector" ).datepicker({ constrainInput: false });
Get or set the constrainInput
option, after initialization:
// Getter var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" ); // Setter $( ".selector" ).datepicker( "option", "constrainInput", false );
"Today"
showButtonPanel
option to display this button.Code examples:
Initialize the datepicker with the currentText
option specified:
$( ".selector" ).datepicker({ currentText: "Now" });
Get or set the currentText
option, after initialization:
// Getter var currentText = $( ".selector" ).datepicker( "option", "currentText" ); // Setter $( ".selector" ).datepicker( "option", "currentText", "Now" );
"mm/dd/yy"
formatDate
function.Code examples:
Initialize the datepicker with the dateFormat
option specified:
$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
Get or set the dateFormat
option, after initialization:
// Getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); // Setter $( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]
dateFormat
option.Code examples:
Initialize the datepicker with the dayNames
option specified:
$( ".selector" ).datepicker({ dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ] });
Get or set the dayNames
option, after initialization:
// Getter var dayNames = $( ".selector" ).datepicker( "option", "dayNames" ); // Setter $( ".selector" ).datepicker( "option", "dayNames", [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ] );
[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]
Code examples:
Initialize the datepicker with the dayNamesMin
option specified:
$( ".selector" ).datepicker({ dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ] });
Get or set the dayNamesMin
option, after initialization:
// Getter var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" ); // Setter $( ".selector" ).datepicker( "option", "dayNamesMin", [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ] );
[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]
dateFormat
option.Code examples:
Initialize the datepicker with the dayNamesShort
option specified:
$( ".selector" ).datepicker({ dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ] });
Get or set the dayNamesShort
option, after initialization:
// Getter var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" ); // Setter $( ".selector" ).datepicker( "option", "dayNamesShort", [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ] );
null
dateFormat
, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.Multiple types supported:
- Date: A date object containing the default date.
- Number: A number of days from today. For example
2
represents two days from today and-1
represents yesterday. - String: A string in the format defined by the
dateFormat
option, or a relative date. Relative dates must contain value and period pairs; valid periods are"y"
for years,"m"
for months,"w"
for weeks, and"d"
for days. For example,"+1m +7d"
represents one month and seven days from today.
Code examples:
Initialize the datepicker with the defaultDate
option specified:
$( ".selector" ).datepicker({ defaultDate: +7 });
Get or set the defaultDate
option, after initialization:
// Getter var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" ); // Setter $( ".selector" ).datepicker( "option", "defaultDate", +7 );
"normal"
Code examples:
Initialize the datepicker with the duration
option specified:
$( ".selector" ).datepicker({ duration: "slow" });
Get or set the duration
option, after initialization:
// Getter var duration = $( ".selector" ).datepicker( "option", "duration" ); // Setter $( ".selector" ).datepicker( "option", "duration", "slow" );
0
0
, Monday is 1
, etc.Code examples:
Initialize the datepicker with the firstDay
option specified:
$( ".selector" ).datepicker({ firstDay: 1 });
Get or set the firstDay
option, after initialization:
// Getter var firstDay = $( ".selector" ).datepicker( "option", "firstDay" ); // Setter $( ".selector" ).datepicker( "option", "firstDay", 1 );
false
true
, the current day link moves to the currently selected date instead of today.Code examples:
Initialize the datepicker with the gotoCurrent
option specified:
$( ".selector" ).datepicker({ gotoCurrent: true });
Get or set the gotoCurrent
option, after initialization:
// Getter var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" ); // Setter $( ".selector" ).datepicker( "option", "gotoCurrent", true );
false
minDate
and maxDate
options). You can hide them altogether by setting this attribute to true
.Code examples:
Initialize the datepicker with the hideIfNoPrevNext
option specified:
$( ".selector" ).datepicker({ hideIfNoPrevNext: true });
Get or set the hideIfNoPrevNext
option, after initialization:
// Getter var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" ); // Setter $( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );
false
Code examples:
Initialize the datepicker with the isRTL
option specified:
$( ".selector" ).datepicker({ isRTL: true });
Get or set the isRTL
option, after initialization:
// Getter var isRTL = $( ".selector" ).datepicker( "option", "isRTL" ); // Setter $( ".selector" ).datepicker( "option", "isRTL", true );
null
null
, there is no maximum.Multiple types supported:
- Date: A date object containing the maximum date.
- Number: A number of days from today. For example
2
represents two days from today and-1
represents yesterday. - String: A string in the format defined by the
dateFormat
option, or a relative date. Relative dates must contain value and period pairs; valid periods are"y"
for years,"m"
for months,"w"
for weeks, and"d"
for days. For example,"+1m +7d"
represents one month and seven days from today.
Code examples:
Initialize the datepicker with the maxDate
option specified:
$( ".selector" ).datepicker({ maxDate: "+1m +1w" });
Get or set the maxDate
option, after initialization:
// Getter var maxDate = $( ".selector" ).datepicker( "option", "maxDate" ); // Setter $( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );
null
null
, there is no minimum.Multiple types supported:
- Date: A date object containing the minimum date.
- Number: A number of days from today. For example
2
represents two days from today and-1
represents yesterday. - String: A string in the format defined by the
dateFormat
option, or a relative date. Relative dates must contain value and period pairs; valid periods are"y"
for years,"m"
for months,"w"
for weeks, and"d"
for days. For example,"+1m +7d"
represents one month and seven days from today.
Code examples:
Initialize the datepicker with the minDate
option specified:
$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });
Get or set the minDate
option, after initialization:
// Getter var minDate = $( ".selector" ).datepicker( "option", "minDate" ); // Setter $( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
dateFormat
option.Code examples:
Initialize the datepicker with the monthNames
option specified:
$( ".selector" ).datepicker({ monthNames: [ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ] });
Get or set the monthNames
option, after initialization:
// Getter var monthNames = $( ".selector" ).datepicker( "option", "monthNames" ); // Setter $( ".selector" ).datepicker( "option", "monthNames", [ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ] );
[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
dateFormat
option.Code examples:
Initialize the datepicker with the monthNamesShort
option specified:
$( ".selector" ).datepicker({ monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ] });
Get or set the monthNamesShort
option, after initialization:
// Getter var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" ); // Setter $( ".selector" ).datepicker( "option", "monthNamesShort", [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ] );
false
currentText
, prevText
and nextText
options should be parsed as dates by the formatDate
function, allowing them to display the target month names for example.Code examples:
Initialize the datepicker with the navigationAsDateFormat
option specified:
$( ".selector" ).datepicker({ navigationAsDateFormat: true });
Get or set the navigationAsDateFormat
option, after initialization:
// Getter var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" ); // Setter $( ".selector" ).datepicker( "option", "navigationAsDateFormat", true );
"Next"
Code examples:
Initialize the datepicker with the nextText
option specified:
$( ".selector" ).datepicker({ nextText: "Later" });
Get or set the nextText
option, after initialization:
// Getter var nextText = $( ".selector" ).datepicker( "option", "nextText" ); // Setter $( ".selector" ).datepicker( "option", "nextText", "Later" );
1
Multiple types supported:
- Number: The number of months to display in a single row.
- Array: An array defining the number of rows and columns to display.
Code examples:
Initialize the datepicker with the numberOfMonths
option specified:
$( ".selector" ).datepicker({ numberOfMonths: [ 2, 3 ] });
Get or set the numberOfMonths
option, after initialization:
// Getter var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" ); // Setter $( ".selector" ).datepicker( "option", "numberOfMonths", [ 2, 3 ] );
null
this
refers to the associated input field.null
""
if none) and the datepicker instance as parameters. this
refers to the associated input field.null
this
refers to the associated input field."Prev"
Code examples:
Initialize the datepicker with the prevText
option specified:
$( ".selector" ).datepicker({ prevText: "Earlier" });
Get or set the prevText
option, after initialization:
// Getter var prevText = $( ".selector" ).datepicker( "option", "prevText" ); // Setter $( ".selector" ).datepicker( "option", "prevText", "Earlier" );
false
showOtherMonths
option is set to true
.Code examples:
Initialize the datepicker with the selectOtherMonths
option specified:
$( ".selector" ).datepicker({ selectOtherMonths: true });
Get or set the selectOtherMonths
option, after initialization:
// Getter var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" ); // Setter $( ".selector" ).datepicker( "option", "selectOtherMonths", true );
"+10"
dateFormat
'y'). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century.Multiple types supported:
- Number: A value between
0
and99
indicating the cutoff year. - String: A relative number of years from the current year, e.g.,
"+3"
or"-5"
.
Code examples:
Initialize the datepicker with the shortYearCutoff
option specified:
$( ".selector" ).datepicker({ shortYearCutoff: 50 });
Get or set the shortYearCutoff
option, after initialization:
// Getter var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" ); // Setter $( ".selector" ).datepicker( "option", "shortYearCutoff", 50 );
"show"
"show"
(the default), "slideDown"
, "fadeIn"
, any of the jQuery UI effects. Set to an empty string to disable animation.Code examples:
Initialize the datepicker with the showAnim
option specified:
$( ".selector" ).datepicker({ showAnim: "fold" });
Get or set the showAnim
option, after initialization:
// Getter var showAnim = $( ".selector" ).datepicker( "option", "showAnim" ); // Setter $( ".selector" ).datepicker( "option", "showAnim", "fold" );
false
currentText
and closeText
options respectively.Code examples:
Initialize the datepicker with the showButtonPanel
option specified:
$( ".selector" ).datepicker({ showButtonPanel: true });
Get or set the showButtonPanel
option, after initialization:
// Getter var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" ); // Setter $( ".selector" ).datepicker( "option", "showButtonPanel", true );
0
numberOfMonths
option, the showCurrentAtPos
option defines which position to display the current month in.Code examples:
Initialize the datepicker with the showCurrentAtPos
option specified:
$( ".selector" ).datepicker({ showCurrentAtPos: 3 });
Get or set the showCurrentAtPos
option, after initialization:
// Getter var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" ); // Setter $( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 );
false
Code examples:
Initialize the datepicker with the showMonthAfterYear
option specified:
$( ".selector" ).datepicker({ showMonthAfterYear: true });
Get or set the showMonthAfterYear
option, after initialization:
// Getter var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" ); // Setter $( ".selector" ).datepicker( "option", "showMonthAfterYear", true );
"focus"
"focus"
), when a button is clicked ("button"
), or when either event occurs ("both"
).Code examples:
Initialize the datepicker with the showOn
option specified:
$( ".selector" ).datepicker({ showOn: "both" });
Get or set the showOn
option, after initialization:
// Getter var showOn = $( ".selector" ).datepicker( "option", "showOn" ); // Setter $( ".selector" ).datepicker( "option", "showOn", "both" );
{}
showAnim
option, you can provide additional properties for that animation using this option.Code examples:
Initialize the datepicker with the showOptions
option specified:
$( ".selector" ).datepicker({ showOptions: { direction: "up" } });
Get or set the showOptions
option, after initialization:
// Getter var showOptions = $( ".selector" ).datepicker( "option", "showOptions" ); // Setter $( ".selector" ).datepicker( "option", "showOptions", { direction: "up" } );
false
selectOtherMonths
option.Code examples:
Initialize the datepicker with the showOtherMonths
option specified:
$( ".selector" ).datepicker({ showOtherMonths: true });
Get or set the showOtherMonths
option, after initialization:
// Getter var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" ); // Setter $( ".selector" ).datepicker( "option", "showOtherMonths", true );
false
true
, a column is added to show the week of the year. The calculateWeek
option determines how the week of the year is calculated. You may also want to change the firstDay
option.Code examples:
Initialize the datepicker with the showWeek
option specified:
$( ".selector" ).datepicker({ showWeek: true });
Get or set the showWeek
option, after initialization:
// Getter var showWeek = $( ".selector" ).datepicker( "option", "showWeek" ); // Setter $( ".selector" ).datepicker( "option", "showWeek", true );
1
Code examples:
Initialize the datepicker with the stepMonths
option specified:
$( ".selector" ).datepicker({ stepMonths: 3 });
Get or set the stepMonths
option, after initialization:
// Getter var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" ); // Setter $( ".selector" ).datepicker( "option", "stepMonths", 3 );
"Wk"
showWeek
option to display this column.Code examples:
Initialize the datepicker with the weekHeader
option specified:
$( ".selector" ).datepicker({ weekHeader: "W" });
Get or set the weekHeader
option, after initialization:
// Getter var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" ); // Setter $( ".selector" ).datepicker( "option", "weekHeader", "W" );
"c-10:c+10"
"-nn:+nn"
), relative to the currently selected year ("c-nn:c+nn"
), absolute ("nnnn:nnnn"
), or combinations of these formats ("nnnn:-nn"
). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate
and/or maxDate
options.Code examples:
Initialize the datepicker with the yearRange
option specified:
$( ".selector" ).datepicker({ yearRange: "2002:2012" });
Get or set the yearRange
option, after initialization:
// Getter var yearRange = $( ".selector" ).datepicker( "option", "yearRange" ); // Setter $( ".selector" ).datepicker( "option", "yearRange", "2002:2012" );
""
Code examples:
Initialize the datepicker with the yearSuffix
option specified:
$( ".selector" ).datepicker({ yearSuffix: "CE" });
Get or set the yearSuffix
option, after initialization:
// Getter var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" ); // Setter $( ".selector" ).datepicker( "option", "yearSuffix", "CE" );
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).datepicker( "destroy" );
- dateThe initial date.
- onSelectType: Function()A callback function when a date is selected. The function receives the date text and date picker instance as parameters.
- optionsType: OptionsThe new options for the date picker.
- posType: Number[2] or MouseEventThe position of the top/left of the dialog as
[x, y]
or aMouseEvent
that contains the coordinates. If not specified the dialog is centered on the screen.
Invoke the dialog method:
$( ".selector" ).datepicker( "dialog", "10/12/2012" );
null
if no date has been selected.- This method does not accept any arguments.
Invoke the getDate method:
var currentDate = $( ".selector" ).datepicker( "getDate" );
- This method does not accept any arguments.
Invoke the hide method:
$( ".selector" ).datepicker( "hide" );
- This method does not accept any arguments.
Invoke the isDisabled method:
var isDisabled = $( ".selector" ).datepicker( "isDisabled" );
Gets the value currently associated with the specified optionName
.
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar"
would get the value of the bar
property on the foo
option.
- optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).datepicker( "option", "disabled" );
- This signature does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).datepicker( "option" );
Sets the value of the datepicker option associated with the specified optionName
.
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName
. For example, "foo.bar"
would update only the bar
property of the foo
option.
- optionNameType: StringThe name of the option to set.
- valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).datepicker( "option", "disabled", true );
- optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).datepicker( "option", { disabled: true } );
- This method does not accept any arguments.
Invoke the refresh method:
$( ".selector" ).datepicker( "refresh" );
Date
object or a string in the current date format (e.g., "01/26/2009"
), a number of days from today (e.g., +7
) or a string of values and periods ("y"
for years, "m"
for months, "w"
for weeks, "d"
for days, e.g., "+1m +7d"
), or null
to clear the selected date.- dateThe new date.
Invoke the setDate method:
$( ".selector" ).datepicker( "setDate", "10/12/2012" );
- This method does not accept any arguments.
Invoke the show method:
$( ".selector" ).datepicker( "show" );
jQuery
object containing the datepicker. - This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).datepicker( "widget" );
A simple jQuery UI Datepicker.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>datepicker demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body> <div id="datepicker"></div> <script> $( "#datepicker" ).datepicker(); </script> </body> </html>
Please login to continue.