http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/docs/datepicker.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/docs/datepicker.html b/content/development-bundle/docs/datepicker.html new file mode 100644 index 0000000..ca10bba --- /dev/null +++ b/content/development-bundle/docs/datepicker.html @@ -0,0 +1,3291 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI datepicker documentation</title> + + <style> + body { + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" + } + .gutter { + display: none; + } + </style> +</head> +<body> + +<script>{ + "title": + "Datepicker Widget", + "excerpt": + "Select a date from a popup or inline calendar", + "termSlugs": { + "category": [ + "widgets" + ] + } + }</script><article id="datepicker1" class="entry widget"><h2 class="section-title"> +<span>Datepicker Widget</span><span class="version-details">version added: 1.0</span> +</h2> +<div class="entry-wrapper"> +<p class="desc"><strong>Description: </strong>Select a date from a popup or inline calendar</p> +<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a> +</h2></header><div class="quick-nav-section"> +<h3>Options</h3> +<div><a href="#option-altField">altField</a></div> +<div><a href="#option-altFormat">altFormat</a></div> +<div><a href="#option-appendText">appendText</a></div> +<div><a href="#option-autoSize">autoSize</a></div> +<div><a href="#option-beforeShow">beforeShow</a></div> +<div><a href="#option-beforeShowDay">beforeShowDay</a></div> +<div><a href="#option-buttonImage">buttonImage</a></div> +<div><a href="#option-buttonImageOnly">buttonImageOnly</a></div> +<div><a href="#option-buttonText">buttonText</a></div> +<div><a href="#option-calculateWeek">calculateWeek</a></div> +<div><a href="#option-changeMonth">changeMonth</a></div> +<div><a href="#option-changeYear">changeYear</a></div> +<div><a href="#option-closeText">closeText</a></div> +<div><a href="#option-constrainInput">constrainInput</a></div> +<div><a href="#option-currentText">currentText</a></div> +<div><a href="#option-dateFormat">dateFormat</a></div> +<div><a href="#option-dayNames">dayNames</a></div> +<div><a href="#option-dayNamesMin">dayNamesMin</a></div> +<div><a href="#option-dayNamesShort">dayNamesShort</a></div> +<div><a href="#option-defaultDate">defaultDate</a></div> +<div><a href="#option-duration">duration</a></div> +<div><a href="#option-firstDay">firstDay</a></div> +<div><a href="#option-gotoCurrent">gotoCurrent</a></div> +<div><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></div> +<div><a href="#option-isRTL">isRTL</a></div> +<div><a href="#option-maxDate">maxDate</a></div> +<div><a href="#option-minDate">minDate</a></div> +<div><a href="#option-monthNames">monthNames</a></div> +<div><a href="#option-monthNamesShort">monthNamesShort</a></div> +<div><a href="#option-navigationAsDateFormat">navigationAsDateFormat</a></div> +<div><a href="#option-nextText">nextText</a></div> +<div><a href="#option-numberOfMonths">numberOfMonths</a></div> +<div><a href="#option-onChangeMonthYear">onChangeMonthYear</a></div> +<div><a href="#option-onClose">onClose</a></div> +<div><a href="#option-onSelect">onSelect</a></div> +<div><a href="#option-prevText">prevText</a></div> +<div><a href="#option-selectOtherMonths">selectOtherMonths</a></div> +<div><a href="#option-shortYearCutoff">shortYearCutoff</a></div> +<div><a href="#option-showAnim">showAnim</a></div> +<div><a href="#option-showButtonPanel">showButtonPanel</a></div> +<div><a href="#option-showCurrentAtPos">showCurrentAtPos</a></div> +<div><a href="#option-showMonthAfterYear">showMonthAfterYear</a></div> +<div><a href="#option-showOn">showOn</a></div> +<div><a href="#option-showOptions">showOptions</a></div> +<div><a href="#option-showOtherMonths">showOtherMonths</a></div> +<div><a href="#option-showWeek">showWeek</a></div> +<div><a href="#option-stepMonths">stepMonths</a></div> +<div><a href="#option-weekHeader">weekHeader</a></div> +<div><a href="#option-yearRange">yearRange</a></div> +<div><a href="#option-yearSuffix">yearSuffix</a></div> +</div> +<div class="quick-nav-section"> +<h3>Methods</h3> +<div><a href="#method-destroy">destroy</a></div> +<div><a href="#method-dialog">dialog</a></div> +<div><a href="#method-getDate">getDate</a></div> +<div><a href="#method-hide">hide</a></div> +<div><a href="#method-isDisabled">isDisabled</a></div> +<div><a href="#method-option">option</a></div> +<div><a href="#method-refresh">refresh</a></div> +<div><a href="#method-setDate">setDate</a></div> +<div><a href="#method-show">show</a></div> +<div><a href="#method-widget">widget</a></div> +</div> +<div class="quick-nav-section"><h3>Events</h3></div></section><div class="longdesc" id="entry-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>PAGE UP: Move to the previous month.</li> + <li>PAGE DOWN: Move to the next month.</li> + <li>CTRL+PAGE UP: Move to the previous year.</li> + <li>CTRL+PAGE DOWN: Move to the next year.</li> + <li>CTRL+HOME: Move to the current month. Open the datepicker if closed.</li> + <li>CTRL+LEFT: Move to the previous day.</li> + <li>CTRL+RIGHT: Move to the next day.</li> + <li>CTRL+UP: Move to the previous week.</li> + <li>CTRL+DOWN: Move the next week.</li> + <li>ENTER: Select the focused date.</li> + <li>CTRL+END: Close the datepicker and erase the date.</li> + <li>ESCAPE: Close the datepicker without selection.</li> + </ul> + + <h3 id="utility-functions">Utility functions</h3> + + <h4>$.datepicker.setDefaults( settings )</h4> + <p>Change the default settings for all date pickers.</p> + <p>Use the <a href="#method-option"><code>option()</code></a> method to change settings 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> + <div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + <div class="line n6">6</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$.datepicker.setDefaults({</code></div></div><div class="container"><div class="line"><code> showOn: <span class="string">"both"</span>,</code></div></div><div class="container"><div class="line"><code> buttonImageOnly: <span class="literal">true</span>,</code></div></div><div class="container"><div class="line"><code> buttonImage: <span class="string">"calendar.gif"</span>,</code></div></div><div class="container"><div class="line"><code> buttonText: <span class="string">"Calendar"</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + + <p>Set all date pickers to have French text.</p> + <div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$.datepicker.setDefaults( $.datepicker.regional[ <span class="string">"fr"</span> ] );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + + </div> + + <h4>$.datepicker.formatDate( format, date, settings )</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> + <div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$.datepicker.formatDate( <span class="string">"yy-mm-dd"</span>, <span class="keyword">new</span> Date( <span class="number">2007</span>, <span class="number">1</span> - <span class="number">1</span>, <span class="number">26</span> ) );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + + <p>Display the date in expanded French format. Produces "Samedi, Juillet 14, 2007".</p> + <div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + <div class="line n6">6</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$.datepicker.formatDate( <span class="string">"DD, MM d, yy"</span>, <span class="keyword">new</span> Date( <span class="number">2007</span>, <span class="number">7</span> - <span class="number">1</span>, <span class="number">14</span> ), {</code></div></div><div class="container"><div class="line"><code> dayNamesShort: $.datepicker.regional[ <span class="string">"fr"</span> ].dayNamesShort,</code></div></div><div class="container"><div class="line"><code> dayNames: $.datepicker.regional[ <span class="string">"fr"</span> ].dayNames,</code></div></div><div class="container"><div class="line"><code> monthNamesShort: $.datepicker.regional[ <span class="string">"fr"</span> ].monthNamesShort,</code></div></div><div class="container"><div class="line"><code> monthNames: $.datepicker.regional[ <span class="string">"fr"</span> ].monthNames</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre > + </td> + </tr> + </tbody> + </table> +</div> + + </div> + + <h4>$.datepicker.parseDate( format, value, settings )</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> + <div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$.datepicker.parseDate( <span class="string">"yy-mm-dd"</span>, <span class="string">"2007-01-26"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + + <p>Extract a date in expanded French format.</p> + <div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + <div class="line n6">6</div> + + <div class="line n7">7</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$.datepicker.parseDate( <span class="string">"DD, MM d, yy"</span>, <span class="string">"Samedi, Juillet 14, 2007"</span>, {</code></div></div><div class="container"><div class="line"><code> shortYearCuroff: <span class="number">20</span>,</code></div></div><div class="container"><div class="line"><code> dayNamesShort: $.datepicker.regional[ <span class="string">"fr"</span> ].dayNamesShort,</code></div></div><div class="container"><div class="line"><code> dayNames: $.datepicker.regional[ <span class="string">"fr"</span> ].dayNames,</code></div></div><div class="container"><div class="line"><code> monthNamesShort: $.datepicker.regional[ <span class="string">"fr"</span> ].monthNamesShort,</code></div></div><div class="container"><div class="line"><code> monthNames: $.datepicker.regional[ <span class="string">"fr"</span> ].monthNames</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pr e> + </td> + </tr> + </tbody> + </table> +</div> + + </div> + + <h4>$.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> + <div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$.datepicker.iso8601Week( <span class="keyword">new</span> Date( <span class="number">2007</span>, <span class="number">1</span> - <span class="number">1</span>, <span class="number">26</span> ) );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + + </div> + + <h4>$.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> + <div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">"#datepicker"</span> ).datepicker({</code></div></div><div class="container"><div class="line"><code> beforeShowDay: $.datepicker.noWeekends</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + + </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 settings to the set of available localizations and automatically applies them as defaults for all instances.</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> + + <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> + </div> +<h3>Additional Notes:</h3> +<div class="longdesc"><ul><li> + 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. + </li></ul></div> +<section id="options"><header><h2>Options</h2></header><div id="option-altField" class="api-item first-item"> +<h3>altField<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector";>Selector</a> or <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> or <a href="http://api.jquery.com/Types/#Element";>Element</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>""</code> +</div> +<div>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.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>altField</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ altField: <span class="string">"#actualDate"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>altField</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> altField = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"altField"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"altField"</span>, <span class="string">"#actualDate"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-altFormat" class="api-item"> +<h3>altFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>""</code> +</div> +<div>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 [[UI/Datepicker/formatDate|formatDate]] function</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>altFormat</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ altFormat: <span class="string">"yy-mm-dd"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>altFormat</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> altFormat = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"altFormat"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"altFormat"</span>, <span class="string">"yy-mm-dd"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-appendText" class="api-item"> +<h3>appendText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>""</code> +</div> +<div>The text to display after each date field, e.g., to show the required format.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>appendText</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ appendText: <span class="string">"(yyyy-mm-dd)"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>appendText</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> appendText = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"appendText"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"appendText"</span>, <span class="string">"(yyyy-mm-dd)"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-autoSize" class="api-item"> +<h3>autoSize<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>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>.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>autoSize</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ autoSize: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>autoSize</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> autoSize = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"autoSize"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"autoSize"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-beforeShow" class="api-item"> +<h3>beforeShow<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function";>Function</a>( <a href="http://api.jquery.com/Types/#Element";>Element</a> input, <a href="http://api.jquery.com/Types/#Object";>Object</a> inst )</span> +</h3> +<div class="default"> +<strong>Default: </strong><code>null</code> +</div> +<div>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.</div> +</div> +<div id="option-beforeShowDay" class="api-item"> +<h3>beforeShowDay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function";>Function</a>( <a href="http://api.jquery.com/Types/#Date";>Date</a> date )</span> +</h3> +<div class="default"> +<strong>Default: </strong><code>null</code> +</div> +<div>A function takes a date as a parameter and must return an array with <code>[0]</code> equal to <code>true</code>/<code>false</code> indicating whether or not this date is selectable, <code>[1]</code> equal to a CSS class name or <code>""</code> for the default presentation, and <code>[2]</code> an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.</div> +</div> +<div id="option-buttonImage" class="api-item"> +<h3>buttonImage<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>""</code> +</div> +<div>The URL for the popup button image. If set, the <a href="#option-buttonText"><code>buttonText</code></a> option becomes the <code>alt</code> value and is not directly displayed.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>buttonImage</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ buttonImage: <span class="string">"/images/datepicker.gif"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>buttonImage</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> buttonImage = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"buttonImage"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"buttonImage"</span>, <span class="string">"/images/datepicker.gif"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-buttonImageOnly" class="api-item"> +<h3>buttonImageOnly<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Whether the button image should be rendered by itself instead of inside a button element.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>buttonImageOnly</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ buttonImageOnly: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>buttonImageOnly</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> buttonImageOnly = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"buttonImageOnly"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"buttonImageOnly"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-buttonText" class="api-item"> +<h3>buttonText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"..."</code> +</div> +<div>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>.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>buttonText</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ buttonText: <span class="string">"Choose"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>buttonText</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> buttonText = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"buttonText"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"buttonText"</span>, <span class="string">"Choose"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-calculateWeek" class="api-item"> +<h3>calculateWeek<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function";>Function</a>()</span> +</h3> +<div class="default"> +<strong>Default: </strong><code>jQuery.datepicker.iso8601Week</code> +</div> +<div>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.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>calculateWeek</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ calculateWeek: myWeekCalc });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>calculateWeek</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> calculateWeek = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"calculateWeek"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"calculateWeek"</span>, myWeekCalc );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-changeMonth" class="api-item"> +<h3>changeMonth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Whether the month should be rendered as a dropdown instead of text.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>changeMonth</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ changeMonth: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>changeMonth</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> changeMonth = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"changeMonth"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"changeMonth"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-changeYear" class="api-item"> +<h3>changeYear<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>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.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>changeYear</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ changeYear: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>changeYear</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> changeYear = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"changeYear"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"changeYear"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-closeText" class="api-item"> +<h3>closeText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"Done"</code> +</div> +<div>The text to display for the close link. Use the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option to display this button.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>closeText</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ closeText: <span class="string">"Close"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>closeText</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> closeText = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"closeText"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"closeText"</span>, <span class="string">"Close"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-constrainInput" class="api-item"> +<h3>constrainInput<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>true</code> +</div> +<div>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.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>constrainInput</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ constrainInput: <span class="literal">false</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>constrainInput</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> constrainInput = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"constrainInput"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"constrainInput"</span>, <span class="literal">false</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-currentText" class="api-item"> +<h3>currentText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"Today"</code> +</div> +<div>The text to display for the current day link. Use the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option to display this button.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>currentText</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ currentText: <span class="string">"Now"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>currentText</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> currentText = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"currentText"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"currentText"</span>, <span class="string">"Now"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-dateFormat" class="api-item"> +<h3>dateFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"mm/dd/yy"</code> +</div> +<div>The format for parsed and displayed dates. For a full list of the possible formats see the <code>[[UI/Datepicker/formatDate|formatDate]]</code> function.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>dateFormat</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ dateFormat: <span class="string">"yy-mm-dd"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>dateFormat</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> dateFormat = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"dateFormat"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"dateFormat"</span>, <span class="string">"yy-mm-dd"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-dayNames" class="api-item"> +<h3>dayNames<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Array";>Array</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]</code> +</div> +<div>The list of long day names, starting from Sunday, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>dayNames</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ dayNames: [ <span class="string">"Dimanche"</span>, <span class="string">"Lundi"</span>, <span class="string">"Mardi"</span>, <span class="string">"Mercredi"</span>, <span class="string">"Jeudi"</span>, <span class="string">"Vendredi"</span>, <span class="string">"Samedi"</span> ] });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>dayNames</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> dayNames = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"dayNames"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"dayNames"</span>, [ <span class="string">"Dimanche"</span>, <span class="string">"Lundi"</span>, <span class="string">"Mardi"</span>, <span class="string">"Mercredi"</span>, <span class="string">"Jeudi"</span>, <span class="string">"Vendredi"</span>, <span class="string">"Samedi"</span> ] );</code></d iv></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-dayNamesMin" class="api-item"> +<h3>dayNamesMin<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Array";>Array</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]</code> +</div> +<div>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>dayNamesMin</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ dayNamesMin: [ <span class="string">"Di"</span>, <span class="string">"Lu"</span>, <span class="string">"Ma"</span>, <span class="string">"Me"</span>, <span class="string">"Je"</span>, <span class="string">"Ve"</span>, <span class="string">"Sa"</span> ] });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>dayNamesMin</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> dayNamesMin = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"dayNamesMin"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"dayNamesMin"</span>, [ <span class="string">"Di"</span>, <span class="string">"Lu"</span>, <span class="string">"Ma"</span>, <span class="string">"Me"</span>, <span class="string">"Je"</span>, <span class="string">"Ve"</span>, <span class="string">"Sa"</span> ] );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-dayNamesShort" class="api-item"> +<h3>dayNamesShort<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Array";>Array</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]</code> +</div> +<div>The list of abbreviated day names, starting from Sunday, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>dayNamesShort</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ dayNamesShort: [ <span class="string">"Dim"</span>, <span class="string">"Lun"</span>, <span class="string">"Mar"</span>, <span class="string">"Mer"</span>, <span class="string">"Jeu"</span>, <span class="string">"Ven"</span>, <span class="string">"Sam"</span> ] });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>dayNamesShort</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> dayNamesShort = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"dayNamesShort"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"dayNamesShort"</span>, [ <span class="string">"Dim"</span>, <span class="string">"Lun"</span>, <span class="string">"Mar"</span>, <span class="string">"Mer"</span>, <span class="string">"Jeu"</span>, <span class="string">"Ven"</span>, <span class="string">"Sam"</span> ] );</code></div></div> </pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-defaultDate" class="api-item"> +<h3>defaultDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Date";>Date</a> or <a href="http://api.jquery.com/Types/#Number";>Number</a> or <a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>null</code> +</div> +<div>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 <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code>, 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.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>Date</strong>: A date object containing the default date.</li> +<li> +<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li> +<li> +<strong>String</strong>: 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.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>defaultDate</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ defaultDate: +<span class="number">7</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>defaultDate</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> defaultDate = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"defaultDate"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"defaultDate"</span>, +<span class="number">7</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-duration" class="api-item"> +<h3>duration<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#";></a> or <a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"normal"</code> +</div> +<div>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").</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>duration</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ duration: <span class="string">"slow"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>duration</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> duration = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"duration"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"duration"</span>, <span class="string">"slow"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-firstDay" class="api-item"> +<h3>firstDay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Integer";>Integer</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>0</code> +</div> +<div>Set the first day of the week: Sunday is <code>0</code>, Monday is <code>1</code>, etc.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>firstDay</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ firstDay: <span class="number">1</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>firstDay</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> firstDay = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"firstDay"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"firstDay"</span>, <span class="number">1</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-gotoCurrent" class="api-item"> +<h3>gotoCurrent<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>When <code>true</code>, the current day link moves to the currently selected date instead of today.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>gotoCurrent</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ gotoCurrent: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>gotoCurrent</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> gotoCurrent = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"gotoCurrent"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"gotoCurrent"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-hideIfNoPrevNext" class="api-item"> +<h3>hideIfNoPrevNext<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>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>.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>hideIfNoPrevNext</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ hideIfNoPrevNext: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>hideIfNoPrevNext</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> hideIfNoPrevNext = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"hideIfNoPrevNext"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"hideIfNoPrevNext"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-isRTL" class="api-item"> +<h3>isRTL<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Whether the current language is drawn from right to left.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>isRTL</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ isRTL: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>isRTL</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> isRTL = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"isRTL"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"isRTL"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-maxDate" class="api-item"> +<h3>maxDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Date";>Date</a> or <a href="http://api.jquery.com/Types/#Number";>Number</a> or <a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>null</code> +</div> +<div>The maximum selectable date. When set to <code>null</code>, there is no maximum.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>Date</strong>: A date object containing the maximum date.</li> +<li> +<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li> +<li> +<strong>String</strong>: 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.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>maxDate</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ maxDate: <span class="string">"+1m +1w"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>maxDate</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxDate = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"maxDate"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"maxDate"</span>, <span class="string">"+1m +1w"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-minDate" class="api-item"> +<h3>minDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Date";>Date</a> or <a href="http://api.jquery.com/Types/#Number";>Number</a> or <a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>null</code> +</div> +<div>The minimum selectable date. When set to <code>null</code>, there is no minimum.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>Date</strong>: A date object containing the minimum date.</li> +<li> +<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li> +<li> +<strong>String</strong>: 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.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>minDate</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ minDate: <span class="keyword">new</span> Date(<span class="number">2007</span>, <span class="number">1</span> - <span class="number">1</span>, <span class="number">1</span>) });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>minDate</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minDate = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"minDate"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"minDate"</span>, <span class="keyword">new</span> Date(<span class="number">2007</span>, <span class="number">1</span> - <span class="number">1</span>, <span class="number">1</span>) );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-monthNames" class="api-item"> +<h3>monthNames<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Array";>Array</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]</code> +</div> +<div>The list of full month names, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>monthNames</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ monthNames: [ <span class="string">"Januar"</span>, <span class="string">"Februar"</span>, <span class="string">"Marts"</span>, <span class="string">"April"</span>, <span class="string">"Maj"</span>, <span class="string">"Juni"</span>, <span class="string">"Juli"</span>, <span class="string">"August"</span>, <span class="string">"September"</span>, <span class="string">"Oktober"</span>, <span class="string">"November"</span>, <span class="string">"December"</span> ] });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>monthNames</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> monthNames = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"monthNames"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"monthNames"</span>, [ <span class="string">"Januar"</span>, <span class="string">"Februar"</span>, <span class="string">"Marts"</span>, <span class="string">"April"</span>, <span class="string">"Maj"</span>, <span class="string">"Juni"</span>, <span class="string">"Juli"</span>, <span class="strin g">"August"</span>, <span class="string">"September"</span>, <span class="string">"Oktober"</span>, <span class="string">"November"</span>, <span class="string">"December"</span> ] );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-monthNamesShort" class="api-item"> +<h3>monthNamesShort<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Array";>Array</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</code> +</div> +<div>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.</div> +<strong>Code examples:</strong><p>Initialize the datepicker with the <code>monthNamesShort</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker({ monthNamesShort: [ <span class="string">"Jan"</span>, <span class="string">"Feb"</span>, <span class="string">"Mar"</span>, <span class="string">"Apr"</span>, <span class="string">"Maj"</span>, <span class="string">"Jun"</span>, <span class="string">"Jul"</span>, <span class="string">"Aug"</span>, <span class="string">"Sep"</span>, <span class="string">"Okt"</span>, <span class="string">"Nov"</span>, <span class="string">"Dec"</span> ] });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>monthNamesShort</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> monthNamesShort = $( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"monthNamesShort"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).datepicker( <span class="string">"option"</span>, <span class="string">"monthNamesShort"</span>, [ <span class="string">"Jan"</span>, <span class="string">"Feb"</span>, <span class="string">"Mar"</span>, <span class="string">"Apr"</span>, <span class="string">"Maj"</span>, <span class="string">"Jun"</span>, <span class="string">"Jul"</span>, <span class="str ing">"Aug"</span>, <span class="string">"Sep"</span>, <span class="string">"Okt"</span>, <span class="string">"Nov"</span>, <span class="string">"Dec"</span> ] );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-navigationAsDateFormat" class="api-item"> +<h3>navigationAsDateFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Whether the <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>[[UI/Datepicker/formatDate|formatDate]]</code> function, allowing them to display the target month nam
<TRUNCATED> --------------------------------------------------------------------- To unsubscribe, e-mail: server-dev-unsubscr...@james.apache.org For additional commands, e-mail: server-dev-h...@james.apache.org
