Permalink
Fetching contributors…
Cannot retrieve contributors at this time
519 lines (503 sloc) 34.7 KB
<?xml version="1.0"?>
<entry name="datepicker" type="widget" widget-element="datepicker">
<title>Datepicker Widget</title>
<desc>Select a date from a popup or inline calendar</desc>
<longdesc>
<p>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.</p>
<p>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.</p>
<h3>Keyboard interaction</h3>
<p>While the datepicker is open, the following key commands are available:</p>
<ul>
<li><code>PAGE UP</code>: Move to the previous month.</li>
<li><code>PAGE DOWN</code>: Move to the next month.</li>
<li><code>CTRL</code> + <code>PAGE UP</code>: Move to the previous year.</li>
<li><code>CTRL</code> + <code>PAGE DOWN</code>: Move to the next year.</li>
<li><code>CTRL</code> + <code>HOME</code>: Open the datepicker if closed.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>HOME</code>: Move to the current month.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>LEFT</code>: Move to the previous day.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>RIGHT</code>: Move to the next day.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>UP</code>: Move to the previous week.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>DOWN</code>: Move to the next week.</li>
<li><code>ENTER</code>: Select the focused date.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>END</code>: Close the datepicker and erase the date.</li>
<li><code>ESCAPE</code>: Close the datepicker without selection.</li>
</ul>
<h3 id="utility-functions">Utility functions</h3>
<h4 id="utility-setDefaults">$.datepicker.setDefaults( options )</h4>
<p>Change the default options for all date pickers.</p>
<p>Use the <a href="#method-option"><code>option()</code></a> method to change options for individual instances.</p>
<div>
<strong>Code examples:</strong>
<p>Set all date pickers to open on focus or a click on an icon.</p>
<pre><code>
$.datepicker.setDefaults({
showOn: "both",
buttonImageOnly: true,
buttonImage: "calendar.gif",
buttonText: "Calendar"
});
</code></pre>
<p>Set all date pickers to have French text.</p>
<pre><code>
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
</code></pre>
</div>
<h4 id="utility-formatDate">$.datepicker.formatDate( format, date, options )</h4>
<p>Format a date into a string value with a specified format.</p>
<p>The format can be combinations of the following:</p>
<ul>
<li>d - day of month (no leading zero)</li>
<li>dd - day of month (two digit)</li>
<li>o - day of the year (no leading zeros)</li>
<li>oo - day of the year (three digit)</li>
<li>D - day name short</li>
<li>DD - day name long</li>
<li>m - month of year (no leading zero)</li>
<li>mm - month of year (two digit)</li>
<li>M - month name short</li>
<li>MM - month name long</li>
<li>y - year (two digit)</li>
<li>yy - year (four digit)</li>
<li>@ - Unix timestamp (ms since 01/01/1970)</li>
<li> ! - Windows ticks (100ns since 01/01/0001)</li>
<li>'...' - literal text</li>
<li>'' - single quote</li>
<li>anything else - literal text</li>
</ul>
<p>There are also a number of predefined standard date formats available from <code>$.datepicker</code>:</p>
<ul>
<li>ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)</li>
<li>COOKIE - 'D, dd M yy'</li>
<li>ISO_8601 - 'yy-mm-dd'</li>
<li>RFC_822 - 'D, d M y' (See RFC 822)</li>
<li>RFC_850 - 'DD, dd-M-y' (See RFC 850)</li>
<li>RFC_1036 - 'D, d M y' (See RFC 1036)</li>
<li>RFC_1123 - 'D, d M yy' (See RFC 1123)</li>
<li>RFC_2822 - 'D, d M yy' (See RFC 2822)</li>
<li>RSS - 'D, d M y' (Same as RFC 822)</li>
<li>TICKS - '!'</li>
<li>TIMESTAMP - '@'</li>
<li>W3C - 'yy-mm-dd' (Same as ISO 8601)</li>
</ul>
<div>
<strong>Code examples:</strong>
<p>Display the date in ISO format. Produces "2007-01-26".</p>
<pre><code>
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );
</code></pre>
<p>Display the date in expanded French format. Produces "Samedi, Juillet 14, 2007".</p>
<pre><code>
$.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
});
</code></pre>
</div>
<h4 id="utility-parseDate">$.datepicker.parseDate( format, value, options )</h4>
<p>Extract a date from a string value with a specified format.</p>
<p>The format can be combinations of the following:</p>
<ul>
<li>d - day of month (no leading zero)</li>
<li>dd - day of month (two digit)</li>
<li>o - day of year (no leading zeros)</li>
<li>oo - day of year (three digit)</li>
<li>D - day name short</li>
<li>DD - day name long</li>
<li>m - month of year (no leading zero)</li>
<li>mm - month of year (two digit)</li>
<li>M - month name short</li>
<li>MM - month name long</li>
<li>y - year (two digit)</li>
<li>yy - year (four digit)</li>
<li>@ - Unix timestamp (ms since 01/01/1970)</li>
<li> ! - Windows ticks (100ns since 01/01/0001)</li>
<li>'...' - literal text</li>
<li>'' - single quote</li>
<li>anything else - literal text</li>
</ul>
<p>A number of exceptions may be thrown:</p>
<ul>
<li>'Invalid arguments' if either format or value is null</li>
<li>'Missing number at position nn' if format indicated a numeric value that is not then found</li>
<li>'Unknown name at position nn' if format indicated day or month name that is not then found</li>
<li>'Unexpected literal at position nn' if format indicated a literal value that is not then found</li>
<li>'Invalid date' if the date is invalid, such as '31/02/2007'</li>
</ul>
<div>
<strong>Code examples:</strong>
<p>Extract a date in ISO format.</p>
<pre><code>
$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" );
</code></pre>
<p>Extract a date in expanded French format.</p>
<pre><code>
$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
shortYearCutoff: 20,
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
dayNames: $.datepicker.regional[ "fr" ].dayNames,
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
monthNames: $.datepicker.regional[ "fr" ].monthNames
});
</code></pre>
</div>
<h4 id="utility-iso8601Week">$.datepicker.iso8601Week( date )</h4>
<p>Determine the week of the year for a given date: 1 to 53.</p>
<p>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.</p>
<p>This function is the default implementation for the <a href="#option-calculateWeek"><code>calculateWeek</code></a> option.</p>
<div>
<strong>Code examples:</strong>
<p>Find the week of the year for a date.</p>
<pre><code>
$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) );
</code></pre>
</div>
<h4 id="utility-noWeekends">$.datepicker.noWeekends</h4>
<p>Set as beforeShowDay function to prevent selection of weekends.</p>
<p>We can provide the <code>noWeekends()</code> function into the <a href="#option-beforeShowDay"><code>beforeShowDay</code></a> option which will calculate all the weekdays and provide an array of <code>true</code>/<code>false</code> values indicating whether a date is selectable.</p>
<div>
<strong>Code examples:</strong>
<p>Set the DatePicker so no weekend is selectable</p>
<pre><code>
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
</code></pre>
</div>
<h3>Localization</h3>
<p>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., <code>jquery.ui.datepicker-fr.js</code> 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 <a href="https://github.com/jquery/jquery-ui/tree/master/ui/i18n">https://github.com/jquery/jquery-ui/tree/master/ui/i18n</a>.</p>
<p>The <code>$.datepicker.regional</code> attribute holds an array of localizations, indexed by language code, with <code>""</code> referring to the default (English). Each entry is an object with the following attributes: <code>closeText</code>, <code>prevText</code>, <code>nextText</code>, <code>currentText</code>, <code>monthNames</code>, <code>monthNamesShort</code>, <code>dayNames</code>, <code>dayNamesShort</code>, <code>dayNamesMin</code>, <code>weekHeader</code>, <code>dateFormat</code>, <code>firstDay</code>, <code>isRTL</code>, <code>showMonthAfterYear</code>, and <code>yearSuffix</code>.</p>
<p>You can restore the default localizations with:</p>
<code>$.datepicker.setDefaults( $.datepicker.regional[ "" ] );</code>
<p>And can then override an individual datepicker for a specific locale:</p>
<code>$( selector ).datepicker( $.datepicker.regional[ "fr" ] );</code>
<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<ul>
<li>
<code>ui-datepicker</code>: The outer container of the datepicker. If the datepicker is inline, this element will additionally have a <code>ui-datepicker-inline</code> class. If the <a href="#option-isRTL"><code>isRTL</code></a> option is set, this element will additionally have a class of <code>ui-datepicker-rtl</code>.
<ul>
<li>
<code>ui-datepicker-header</code>: The container for the datepicker's header.
<ul>
<li><code>ui-datepicker-prev</code>: The control used to select previous months.</li>
<li><code>ui-datepicker-next</code>: The control used to select subsequent months.</li>
<li>
<code>ui-datepicker-title</code>: The container for the datepicker's title containing the month and year.
<ul>
<li><code>ui-datepicker-month</code>: The textual display of the month or a <code>&lt;select&gt;</code> element if the <a href="#option-changeMonth"><code>changeMonth</code></a> option is set.</li>
<li><code>ui-datepicker-year</code>: The textual display of the year or a <code>&lt;select&gt;</code> element if the <a href="#option-changeYear"><code>changeYear</code></a> option is set.</li>
</ul>
</li>
</ul>
</li>
<li>
<code>ui-datepicker-calendar</code>: The table that contains the calendar itself.
<ul>
<li><code>ui-datepicker-week-end</code>: Cells containing weekend days.</li>
<li><code>ui-datepicker-other-month</code>: Cells containing days that occur in a month other than the currently selected month.</li>
<li><code>ui-datepicker-unselectable</code>: Cells containing days that are not selectable by the user.</li>
<li><code>ui-datepicker-current-day</code>: The cell containing the selected day.</li>
<li><code>ui-datepicker-today</code>: The cell containing today's date.</li>
</ul>
</li>
<li>
<code>ui-datepicker-buttonpane</code>: The buttonpane that is used when the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option is set.
<ul>
<li><code>ui-datepicker-current</code>: The button used to select today's date.</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>If the <a href="#option-numberOfMonths"><code>numberOfMonths</code></a> option is used to display multiple months at once, a number of additional classes are used:</p>
<ul>
<li>
<code>ui-datepicker-multi</code>: The outermost container of a multiple month datepicker. This element can additionally have a <code>ui-datepicker-multi-2</code>, <code>ui-datepicker-multi-3</code>, or <code>ui-datepicker-multi-4</code> class name depending on the number of months to display.
<ul>
<li><code>ui-datepicker-group</code>: Individual pickers within the group. This element will additionally have a <code>ui-datepicker-group-first</code>, <code>ui-datepicker-group-middle</code>, or <code>ui-datepicker-group-last</code> class name depending on its position within the group.</li>
</ul>
</li>
</ul>
<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
<li><a href="/category/effects-core/">Effects Core</a> (optional; for use with the <a href="#option-showAnim"><code>showAnim</code></a> option)</li>
</ul>
</longdesc>
<note id="functional-css"/>
<note id="native-change-warning"/>
<note>
Creating a datepicker on an <code>&lt;input type="date"&gt;</code> is not supported due to a UI conflict with the native picker.
</note>
<added>1.0</added>
<options>
<option name="altField" default='""' example-value='"#actualDate"'>
<desc>An input element that is to be updated with the selected date from the datepicker. Use the <a href="#option-altFormat"><code>altFormat</code></a> option to change the format of the date within this field. Leave as blank for no alternate field.</desc>
<type name="Selector"/>
<type name="jQuery"/>
<type name="Element"/>
</option>
<option name="altFormat" type="String" default='""' example-value='"yy-mm-dd"'>
<desc>The <a href="#option-dateFormat"><code>dateFormat</code></a> to be used for the <a href="#option-altField"><code>altField</code></a> 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 <a href="#utility-formatDate"><code>formatDate</code></a> function</desc>
</option>
<option name="appendText" type="String" default='""' example-value='"(yyyy-mm-dd)"'>
<desc>The text to display after each date field, e.g., to show the required format.</desc>
</option>
<option name="autoSize" type="Boolean" default="false" example-value="true">
<desc>Set to <code>true</code> to automatically resize the input field to accommodate dates in the current <a href="#option-dateFormat"><code>dateFormat</code></a>.</desc>
</option>
<option name="buttonImage" type="String" default='""' example-value='"/images/datepicker.gif"'>
<desc>A URL of an image to use to display the datepicker when the <a href="#option-showOn"><code>showOn</code></a> option is set to <code>"button"</code> or <code>"both"</code>. If set, the <a href="#option-buttonText"><code>buttonText</code></a> option becomes the <code>alt</code> value and is not directly displayed.</desc>
</option>
<option name="buttonImageOnly" type="Boolean" default="false" example-value="true">
<desc>Whether the button image should be rendered by itself instead of inside a button element. This option is only relevant if the <a href="#option-buttonImage"><code>buttonImage</code></a> option has also been set.</desc>
</option>
<option name="buttonText" type="String" default='"..."' example-value='"Choose"'>
<desc>The text to display on the trigger button. Use in conjunction with the <a href="#option-showOn"><code>showOn</code></a> option set to <code>"button"</code> or <code>"both"</code>.</desc>
</option>
<option name="calculateWeek" type="Function" default="jQuery.datepicker.iso8601Week" example-value='myWeekCalc'>
<desc>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.</desc>
</option>
<option name="changeMonth" type="Boolean" default="false" example-value="true">
<desc>Whether the month should be rendered as a dropdown instead of text.</desc>
</option>
<option name="changeYear" type="Boolean" default="false" example-value="true">
<desc>Whether the year should be rendered as a dropdown instead of text. Use the <a href="#option-yearRange"><code>yearRange</code></a> option to control which years are made available for selection.</desc>
</option>
<option name="closeText" type="String" default='"Done"' example-value='"Close"'>
<desc>The text to display for the close link. Use the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option to display this button.</desc>
</option>
<option name="constrainInput" type="Boolean" default="true" example-value="false">
<desc>When <code>true</code>, entry in the input field is constrained to those characters allowed by the current <a href="#option-dateFormat"><code>dateFormat</code></a> option.</desc>
</option>
<option name="currentText" type="String" default='"Today"' example-value='"Now"'>
<desc>The text to display for the current day link. Use the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option to display this button.</desc>
</option>
<option name="dateFormat" type="String" default='"mm/dd/yy"' example-value='"yy-mm-dd"'>
<desc>The format for parsed and displayed dates. For a full list of the possible formats see the <code><a href="#utility-formatDate"><code>formatDate</code></a></code> function.</desc>
</option>
<option name="dayNames" type="Array" default='[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]' example-value='[ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ]'>
<desc>The list of long day names, starting from Sunday, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</desc>
</option>
<option name="dayNamesMin" type="Array" default='[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]' example-value='[ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ]'>
<desc>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker.</desc>
</option>
<option name="dayNamesShort" type="Array" default='[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]' example-value='[ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ]'>
<desc>The list of abbreviated day names, starting from Sunday, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</desc>
</option>
<option name="defaultDate" default="null" example-value="+7">
<desc>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 <a href="#option-dateFormat"><code>dateFormat</code></a>, 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.</desc>
<type name="Date">
<desc>A date object containing the default date.</desc>
</type>
<type name="Number">
<desc>A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</desc>
</type>
<type name="String">
<desc>A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</desc>
</type>
</option>
<option name="duration" default='"normal"' example-value='"slow"'>
<desc>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").</desc>
<type nmae="Number"/>
<type name="String"/>
</option>
<option name="firstDay" type="Integer" default="0" example-value="1">
<desc>Set the first day of the week: Sunday is <code>0</code>, Monday is <code>1</code>, etc.</desc>
</option>
<option name="gotoCurrent" type="Boolean" default="false" example-value="true">
<desc>When <code>true</code>, the current day link moves to the currently selected date instead of today.</desc>
</option>
<option name="hideIfNoPrevNext" type="Boolean" default="false" example-value="true">
<desc>Normally the previous and next links are disabled when not applicable (see the <a href="#option-minDate"><code>minDate</code></a> and <a href="#option-maxDate"><code>maxDate</code></a> options). You can hide them altogether by setting this attribute to <code>true</code>.</desc>
</option>
<option name="isRTL" type="Boolean" default="false" example-value="true">
<desc>Whether the current language is drawn from right to left.</desc>
</option>
<option name="maxDate" default="null" example-value='"+1m +1w"'>
<desc>The maximum selectable date. When set to <code>null</code>, there is no maximum.</desc>
<type name="Date">
<desc>A date object containing the maximum date.</desc>
</type>
<type name="Number">
<desc>A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</desc>
</type>
<type name="String">
<desc>A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</desc>
</type>
</option>
<option name="minDate" default="null" example-value="new Date(2007, 1 - 1, 1)">
<desc>The minimum selectable date. When set to <code>null</code>, there is no minimum.</desc>
<type name="Date">
<desc>A date object containing the minimum date.</desc>
</type>
<type name="Number">
<desc>A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</desc>
</type>
<type name="String">
<desc>A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</desc>
</type>
</option>
<option name="monthNames" type="Array" default='[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]' example-value='[ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ]'>
<desc>The list of full month names, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</desc>
</option>
<option name="monthNamesShort" type="Array" default='[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]' example-value='[ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ]'>
<desc>The list of abbreviated month names, as used in the month header on each datepicker and as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</desc>
</option>
<option name="navigationAsDateFormat" type="Boolean" default="false" example-value="true">
<desc>Whether the <a href="#option-currentText"><code>currentText</code></a>, <a href="#option-prevText"><code>prevText</code></a> and <a href="#option-nextText"><code>nextText</code></a> options should be parsed as dates by the <code><a href="#utility-formatDate"><code>formatDate</code></a></code> function, allowing them to display the target month names for example.</desc>
</option>
<option name="nextText" type="String" default='"Next"' example-value='"Later"'>
<desc>The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon.</desc>
</option>
<option name="numberOfMonths" default="1" example-value="[ 2, 3 ]">
<desc>The number of months to show at once.</desc>
<type name="Number">
<desc>The number of months to display in a single row.</desc>
</type>
<type name="Array">
<desc>An array defining the number of rows and columns to display.</desc>
</type>
</option>
<option name="prevText" type="String" default='"Prev"' example-value='"Earlier"'>
<desc>The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon.</desc>
</option>
<option name="selectOtherMonths" type="Boolean" default="false" example-value="true">
<desc>Whether days in other months shown before or after the current month are selectable. This only applies if the <a href="#option-showOtherMonths"><code>showOtherMonths</code></a> option is set to <code>true</code>.</desc>
</option>
<option name="shortYearCutoff" default='"+10"' example-value="50">
<desc>The cutoff year for determining the century for a date (used in conjunction with <a href="#option-dateFormat"><code>dateFormat</code></a> '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.</desc>
<type name="Number">
<desc>A value between <code>0</code> and <code>99</code> indicating the cutoff year.</desc>
</type>
<type name="String">
<desc>A relative number of years from the current year, e.g., <code>"+3"</code> or <code>"-5"</code>.</desc>
</type>
</option>
<option name="showAnim" type="String" default='"show"' example-value='"fold"'>
<desc>The name of the animation used to show and hide the datepicker. Use <code>"show"</code> (the default), <code>"slideDown"</code>, <code>"fadeIn"</code>, any of the <a href="/category/effects/">jQuery UI effects</a>. Set to an empty string to disable animation.</desc>
</option>
<option name="showButtonPanel" type="Boolean" default="false" example-value="true">
<desc>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 <a href="#option-currentText"><code>currentText</code></a> and <a href="#option-closeText"><code>closeText</code></a> options respectively.</desc>
</option>
<option name="showCurrentAtPos" type="Number" default="0" example-value="3">
<desc>When displaying multiple months via the <a href="#option-numberOfMonths"><code>numberOfMonths</code></a> option, the <code>showCurrentAtPos</code> option defines which position to display the current month in.</desc>
</option>
<option name="showMonthAfterYear" type="Boolean" default="false" example-value="true">
<desc>Whether to show the month after the year in the header.</desc>
</option>
<option name="showOn" type="String" default='"focus"' example-value='"both"'>
<desc>When the datepicker should appear. The datepicker can appear when the field receives focus (<code>"focus"</code>), when a button is clicked (<code>"button"</code>), or when either event occurs (<code>"both"</code>).</desc>
</option>
<option name="showOptions" type="Object" default="{}" example-value='{ direction: "up" }'>
<desc>If using one of the jQuery UI effects for the <a href="#option-showAnim"><code>showAnim</code></a> option, you can provide additional properties for that animation using this option.</desc>
</option>
<option name="showOtherMonths" type="Boolean" default="false" example-value="true">
<desc>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 <a href="#option-selectOtherMonths"><code>selectOtherMonths</code></a> option.</desc>
</option>
<option name="showWeek" type="Boolean" default="false" example-value="true">
<desc>When <code>true</code>, a column is added to show the week of the year. The <a href="#option-calculateWeek"><code>calculateWeek</code></a> option determines how the week of the year is calculated. You may also want to change the <a href="#option-firstDay"><code>firstDay</code></a> option.</desc>
</option>
<option name="stepMonths" type="Number" default="1" example-value="3">
<desc>Set how many months to move when clicking the previous/next links.</desc>
</option>
<option name="weekHeader" type="String" default='"Wk"' example-value='"W"'>
<desc>The text to display for the week of the year column heading. Use the <a href="#option-showWeek"><code>showWeek</code></a> option to display this column.</desc>
</option>
<option name="yearRange" type="String" default='"c-10:c+10"' example-value='"2002:2012"'>
<desc>The range of years displayed in the year drop-down: either relative to today's year (<code>"-nn:+nn"</code>), relative to the currently selected year (<code>"c-nn:c+nn"</code>), absolute (<code>"nnnn:nnnn"</code>), or combinations of these formats (<code>"nnnn:-nn"</code>). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the <a href="#option-minDate"><code>minDate</code></a> and/or <a href="#option-maxDate"><code>maxDate</code></a> options.</desc>
</option>
<option name="yearSuffix" type="String" default='""' example-value='"CE"'>
<desc>Additional text to display after the year in the month headers.</desc>
</option>
<!-- events -->
<option name="beforeShow" type="Function" default="null">
<argument name="input" type="Element"/>
<argument name="inst" type="Object"/>
<desc>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.</desc>
</option>
<option name="beforeShowDay" type="Function" default="null">
<argument name="date" type="Date"/>
<desc>A function that takes a date as a parameter and must return an array with:
<ul>
<li><code>[0]</code>: <code>true</code>/<code>false</code> indicating whether or not this date is selectable</li>
<li><code>[1]</code>: a CSS class name to add to the date's cell or <code>""</code> for the default presentation</li>
<li><code>[2]</code>: an optional popup tooltip for this date</li>
</ul>
The function is called for each day in the datepicker before it is displayed.</desc>
</option>
<option name="onChangeMonthYear" type="Function" default="null">
<argument name="year" type="Integer"/>
<argument name="month" type="Integer"/>
<argument name="inst" type="Object"/>
<desc>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. <code>this</code> refers to the associated input field.</desc>
</option>
<option name="onClose" type="Function" default="null">
<argument name="dateText" type="String"/>
<argument name="inst" type="Object"/>
<desc>Called when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text (<code>""</code> if none) and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</desc>
</option>
<option name="onSelect" type="Function" default="null">
<argument name="dateText" type="String"/>
<argument name="inst" type="Object"/>
<desc>Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</desc>
</option>
</options>
<methods>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="dialog" example-params='"10/12/2012"'>
<desc>Opens the datepicker in a dialog box.</desc>
<argument name="date">
<desc>The initial date.</desc>
<type name="String"/>
<type name="Date"/>
</argument>
<argument name="onSelect" type="Function" optional="true">
<desc>A callback function when a date is selected. The function receives the date text and date picker instance as parameters.</desc>
</argument>
<argument name="options" type="Options" optional="true">
<desc>The new options for the date picker.</desc>
</argument>
<argument name="pos" type="Number[2] or MouseEvent" optional="true">
<desc>The position of the top/left of the dialog as <code>[x, y]</code> or a <code>MouseEvent</code> that contains the coordinates. If not specified the dialog is centered on the screen.</desc>
</argument>
</method>
<method name="isDisabled" return="Boolean" example-return-var="isDisabled">
<desc>Determine whether a date picker has been disabled.</desc>
</method>
<method name="hide">
<desc>Close a previously opened date picker.</desc>
</method>
<method name="show">
<desc>Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.</desc>
</method>
<method name="refresh">
<desc>Redraw the date picker, after having made some external modifications.</desc>
</method>
<method name="getDate" return="Date" example-return-var="currentDate">
<desc>Returns the current date for the datepicker or <code>null</code> if no date has been selected.</desc>
</method>
<method name="setDate" example-params='"10/12/2012"'>
<desc>Sets the date for the datepicker. The new date may be a <code>Date</code> object or a string in the current <a href="#option-dateFormat">date format</a> (e.g., <code>"01/26/2009"</code>), a number of days from today (e.g., <code>+7</code>) or a string of values and periods (<code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, <code>"d"</code> for days, e.g., <code>"+1m +7d"</code>), or <code>null</code> to clear the selected date.</desc>
<argument name="date">
<desc>The new date.</desc>
<type name="String"/>
<type name="Date"/>
</argument>
</method>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<example>
<height>300</height>
<desc>A simple jQuery UI Datepicker.</desc>
<code><![CDATA[
$( "#datepicker" ).datepicker();
]]></code>
<html><![CDATA[
<div id="datepicker"></div>
]]></html>
</example>
<category slug="widgets"/>
</entry>