1 

     2 <ul class="UIAPIPlugin-toc">

     3 <li><a href="#overview">Overview</a></li>

     4 <li><a href="#options">Options</a></li>

     5 <li><a href="#events">Events</a></li>

     6 <li><a href="#methods">Methods</a></li>

     7 <li><a href="#theming">Theming</a></li>

     8 </ul>

     9 <div class="UIAPIPlugin">

    10   <h1>jQuery UI Datepicker</h1>

    11   <div id="overview">

    12     <h2 class="top-header">Overview</h2>

    13     <div id="overview-main">

    14         <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>

    15 <p>By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date if selected. For an inline calendar, simply attach the datepicker to a div or span.

    16 </p><p>You can use keyboard shortcuts to drive the datepicker:

    17 </p>

    18 <ul>

    19  <li>page up/down - previous/next month</li>

    20  <li>ctrl+page up/down - previous/next year</li>

    21  <li>ctrl+home - current month or open when closed</li>

    22  <li>ctrl+left/right - previous/next day</li>

    23  <li>ctrl+up/down - previous/next week</li>

    24  <li>enter - accept the selected date</li>

    25  <li>ctrl+end - close and erase the date</li>

    26  <li>escape - close the datepicker without selection</li>

    27 </ul>

    28 <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Datepicker?section=1" title="Edit section: Utility functions">edit</a>]</div><a name="Utility_functions"></a><h3 id="utility-functions">Utility functions</h3>

    29 <ul>

    30  <li><a href="http://docs.jquery.com/UI/Datepicker/setDefaults" title="UI/Datepicker/setDefaults">$.datepicker.setDefaults( settings )</a> - Set settings for all datepicker instances.</li>

    31  <li><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">$.datepicker.formatDate( format, date, settings )</a> - Format a date into a string value with a specified format.</li>

    32  <li><a href="http://docs.jquery.com/UI/Datepicker/iso8601Week" title="UI/Datepicker/iso8601Week">$.datepicker.iso8601Week( date )</a> - Determine the week of the year for a given date: 1 to 53.</li>

    33  <li><a href="http://docs.jquery.com/UI/Datepicker/parseDate" title="UI/Datepicker/parseDate">$.datepicker.parseDate( format, value, settings ) </a> - Extract a date from a string value with a specified format.</li>

    34 </ul>

    35 <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.8/Datepicker?section=2" title="Edit section: Localization">edit</a>]</div><a name="Localization"></a><h3>Localization</h3>

    36 <p>Datepicker provides support for localizing its content to cater for different languages

    37 	and date formats. Each localization is contained within its own file with the 

    38 	language code appended to the name, e.g. <code>jquery.ui.datepicker-fr.js</code> for French.

    39 	These files are loaded after the main datepicker code. They add their settings to the set

    40 	of available localizations and automatically apply them as defaults for all instances.</p>

    41 <p>The <code>$.datepicker.regional</code> attribute holds an array of localizations,

    42 	indexed by language code, with '' referring to the default (English). Each entry is

    43 	an object with the following attributes: <code>closeText</code>, <code>prevText</code>,

    44 	<code>nextText</code>, <code>currentText</code>, <code>monthNames</code>,

    45 	<code>monthNamesShort</code>, <code>dayNames</code>, <code>dayNamesShort</code>, 

    46 	<code>dayNamesMin</code>, <code>weekHeader</code>, <code>dateFormat</code>,

    47 	<code>firstDay</code>, <code>isRTL</code>, <code>showMonthAfterYear</code>,

    48 	and <code>yearSuffix</code>.</p>

    49 <p>You can restore the default localizations with:</p>

    50 <p><code>$.datepicker.setDefaults($.datepicker.regional['']);</code>

    51 </p>

    52 <p>And can then override an individual datepicker for a specific locale:</p>

    53 <p><code>$(selector).datepicker($.datepicker.regional['fr']);</code>

    54 </p>

    55 The localization files are also available in the UI svn: <a href="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/" class="external free" title="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/">http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/</a>

    56     </div>

    57     <div id="overview-dependencies">

    58         <h3>Dependencies</h3>

    59         <ul>

    60 <li>UI Core</li>

    61 </ul>

    62     </div>

    63     <div id="overview-example">

    64         <h3>Example</h3>

    65         <div id="overview-example" class="example">

    66 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>

    67 <p><div id="demo" class="tabs-container" rel="220">

    68 A simple jQuery UI Datepicker.<br />

    69 </p>

    70 <pre>$(&quot;#datepicker&quot;).datepicker();

    71 </pre>

    72 <p></div><div id="source" class="tabs-container">

    73 </p>

    74 <pre>&lt;!DOCTYPE html&gt;

    75 <html>

    76 <head>

    77   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    78   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    79   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    80   

    81   <script>

    82   $(document).ready(function() {

    83     $("#datepicker").datepicker();

    84   });

    85   </script>

    86 </head>

    87 <body style="font-size:62.5%;">

    88   

    89 <div type="text" id="datepicker"></div>

    90 

    91 </body>

    92 </html>

    93 </pre>

    94 <p></div>

    95 </p><p></div>

    96     </div>

    97   </div>

    98   <div id="options">

    99     <h2 class="top-header">Options</h2>

   100     <ul class="options-list">

   101       

   102 <li class="option" id="option-disabled">

   103   <div class="option-header">

   104     <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>

   105     <dl>

   106       <dt class="option-type-label">Type:</dt>

   107         <dd class="option-type">Boolean</dd>

   108       

   109       <dt class="option-default-label">Default:</dt>

   110         <dd class="option-default">false</dd>

   111       

   112     </dl>

   113   </div>

   114   <div class="option-description">

   115     <p>Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker.</p>

   116   </div>

   117   <div class="option-examples">

   118     <h4>Code examples</h4>

   119     <dl class="option-examples-list">

   120     

   121 <dt>

   122   Initialize a datepicker with the <code>disabled</code> option specified.

   123 </dt>

   124 <dd>

   125 <pre><code>$( ".selector" ).datepicker({ disabled: true });</code></pre>

   126 </dd>

   127 

   128     

   129 <dt>

   130   Get or set the <code>disabled</code> option, after init.

   131 </dt>

   132 <dd>

   133 <pre><code>//getter

   134 var disabled = $( ".selector" ).datepicker( "option", "disabled" );

   135 //setter

   136 $( ".selector" ).datepicker( "option", "disabled", true );</code></pre>

   137 </dd>

   138 

   139     </dl>

   140   </div>

   141 </li>

   142 

   143 

   144 <li class="option" id="option-altField">

   145   <div class="option-header">

   146     <h3 class="option-name"><a href="#option-altField">altField</a></h3>

   147     <dl>

   148       <dt class="option-type-label">Type:</dt>

   149         <dd class="option-type">String</dd>

   150       

   151       <dt class="option-default-label">Default:</dt>

   152         <dd class="option-default">''</dd>

   153       

   154     </dl>

   155   </div>

   156   <div class="option-description">

   157     <p>The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-altFormat" title="UI/Datepicker">altFormat</a></code> setting to change the format of the date within this field. Leave as blank for no alternate field.</p>

   158   </div>

   159   <div class="option-examples">

   160     <h4>Code examples</h4>

   161     <dl class="option-examples-list">

   162     

   163 <dt>

   164   Initialize a datepicker with the <code>altField</code> option specified.

   165 </dt>

   166 <dd>

   167 <pre><code>$( ".selector" ).datepicker({ altField: '#actualDate' });</code></pre>

   168 </dd>

   169 

   170     

   171 <dt>

   172   Get or set the <code>altField</code> option, after init.

   173 </dt>

   174 <dd>

   175 <pre><code>//getter

   176 var altField = $( ".selector" ).datepicker( "option", "altField" );

   177 //setter

   178 $( ".selector" ).datepicker( "option", "altField", '#actualDate' );</code></pre>

   179 </dd>

   180 

   181     </dl>

   182   </div>

   183 </li>

   184 

   185 

   186 <li class="option" id="option-altFormat">

   187   <div class="option-header">

   188     <h3 class="option-name"><a href="#option-altFormat">altFormat</a></h3>

   189     <dl>

   190       <dt class="option-type-label">Type:</dt>

   191         <dd class="option-type">String</dd>

   192       

   193       <dt class="option-default-label">Default:</dt>

   194         <dd class="option-default">''</dd>

   195       

   196     </dl>

   197   </div>

   198   <div class="option-description">

   199     <p>The <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> to be used for the <code><a href="http://docs.jquery.com/UI/Datepicker#option-altField" title="UI/Datepicker">altField</a></code> 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="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a> function</p>

   200   </div>

   201   <div class="option-examples">

   202     <h4>Code examples</h4>

   203     <dl class="option-examples-list">

   204     

   205 <dt>

   206   Initialize a datepicker with the <code>altFormat</code> option specified.

   207 </dt>

   208 <dd>

   209 <pre><code>$( ".selector" ).datepicker({ altFormat: 'yy-mm-dd' });</code></pre>

   210 </dd>

   211 

   212     

   213 <dt>

   214   Get or set the <code>altFormat</code> option, after init.

   215 </dt>

   216 <dd>

   217 <pre><code>//getter

   218 var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );

   219 //setter

   220 $( ".selector" ).datepicker( "option", "altFormat", 'yy-mm-dd' );</code></pre>

   221 </dd>

   222 

   223     </dl>

   224   </div>

   225 </li>

   226 

   227 

   228 <li class="option" id="option-appendText">

   229   <div class="option-header">

   230     <h3 class="option-name"><a href="#option-appendText">appendText</a></h3>

   231     <dl>

   232       <dt class="option-type-label">Type:</dt>

   233         <dd class="option-type">String</dd>

   234       

   235       <dt class="option-default-label">Default:</dt>

   236         <dd class="option-default">''</dd>

   237       

   238     </dl>

   239   </div>

   240   <div class="option-description">

   241     <p>The text to display after each date field, e.g. to show the required format.</p>

   242   </div>

   243   <div class="option-examples">

   244     <h4>Code examples</h4>

   245     <dl class="option-examples-list">

   246     

   247 <dt>

   248   Initialize a datepicker with the <code>appendText</code> option specified.

   249 </dt>

   250 <dd>

   251 <pre><code>$( ".selector" ).datepicker({ appendText: '(yyyy-mm-dd)' });</code></pre>

   252 </dd>

   253 

   254     

   255 <dt>

   256   Get or set the <code>appendText</code> option, after init.

   257 </dt>

   258 <dd>

   259 <pre><code>//getter

   260 var appendText = $( ".selector" ).datepicker( "option", "appendText" );

   261 //setter

   262 $( ".selector" ).datepicker( "option", "appendText", '(yyyy-mm-dd)' );</code></pre>

   263 </dd>

   264 

   265     </dl>

   266   </div>

   267 </li>

   268 

   269 

   270 <li class="option" id="option-autoSize">

   271   <div class="option-header">

   272     <h3 class="option-name"><a href="#option-autoSize">autoSize</a></h3>

   273     <dl>

   274       <dt class="option-type-label">Type:</dt>

   275         <dd class="option-type">Boolean</dd>

   276       

   277       <dt class="option-default-label">Default:</dt>

   278         <dd class="option-default">false</dd>

   279       

   280     </dl>

   281   </div>

   282   <div class="option-description">

   283     <p>Set to true to automatically resize the input field to accomodate dates in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>.</p>

   284   </div>

   285   <div class="option-examples">

   286     <h4>Code examples</h4>

   287     <dl class="option-examples-list">

   288     

   289 <dt>

   290   Initialize a datepicker with the <code>autoSize</code> option specified.

   291 </dt>

   292 <dd>

   293 <pre><code>$( ".selector" ).datepicker({ autoSize: true });</code></pre>

   294 </dd>

   295 

   296     

   297 <dt>

   298   Get or set the <code>autoSize</code> option, after init.

   299 </dt>

   300 <dd>

   301 <pre><code>//getter

   302 var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );

   303 //setter

   304 $( ".selector" ).datepicker( "option", "autoSize", true );</code></pre>

   305 </dd>

   306 

   307     </dl>

   308   </div>

   309 </li>

   310 

   311 

   312 <li class="option" id="option-buttonImage">

   313   <div class="option-header">

   314     <h3 class="option-name"><a href="#option-buttonImage">buttonImage</a></h3>

   315     <dl>

   316       <dt class="option-type-label">Type:</dt>

   317         <dd class="option-type">String</dd>

   318       

   319       <dt class="option-default-label">Default:</dt>

   320         <dd class="option-default">''</dd>

   321       

   322     </dl>

   323   </div>

   324   <div class="option-description">

   325     <p>The URL for the popup button image. If set, <code><a href="http://docs.jquery.com/UI/Datepicker#option-buttonText" title="UI/Datepicker">buttonText</a></code> becomes the <i>alt</i> value and is not directly displayed.</p>

   326   </div>

   327   <div class="option-examples">

   328     <h4>Code examples</h4>

   329     <dl class="option-examples-list">

   330     

   331 <dt>

   332   Initialize a datepicker with the <code>buttonImage</code> option specified.

   333 </dt>

   334 <dd>

   335 <pre><code>$( ".selector" ).datepicker({ buttonImage: '/images/datepicker.gif' });</code></pre>

   336 </dd>

   337 

   338     

   339 <dt>

   340   Get or set the <code>buttonImage</code> option, after init.

   341 </dt>

   342 <dd>

   343 <pre><code>//getter

   344 var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" );

   345 //setter

   346 $( ".selector" ).datepicker( "option", "buttonImage", '/images/datepicker.gif' );</code></pre>

   347 </dd>

   348 

   349     </dl>

   350   </div>

   351 </li>

   352 

   353 

   354 <li class="option" id="option-buttonImageOnly">

   355   <div class="option-header">

   356     <h3 class="option-name"><a href="#option-buttonImageOnly">buttonImageOnly</a></h3>

   357     <dl>

   358       <dt class="option-type-label">Type:</dt>

   359         <dd class="option-type">Boolean</dd>

   360       

   361       <dt class="option-default-label">Default:</dt>

   362         <dd class="option-default">false</dd>

   363       

   364     </dl>

   365   </div>

   366   <div class="option-description">

   367     <p>Set to true to place an image after the field to use as the trigger without it appearing on a button.</p>

   368   </div>

   369   <div class="option-examples">

   370     <h4>Code examples</h4>

   371     <dl class="option-examples-list">

   372     

   373 <dt>

   374   Initialize a datepicker with the <code>buttonImageOnly</code> option specified.

   375 </dt>

   376 <dd>

   377 <pre><code>$( ".selector" ).datepicker({ buttonImageOnly: true });</code></pre>

   378 </dd>

   379 

   380     

   381 <dt>

   382   Get or set the <code>buttonImageOnly</code> option, after init.

   383 </dt>

   384 <dd>

   385 <pre><code>//getter

   386 var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );

   387 //setter

   388 $( ".selector" ).datepicker( "option", "buttonImageOnly", true );</code></pre>

   389 </dd>

   390 

   391     </dl>

   392   </div>

   393 </li>

   394 

   395 

   396 <li class="option" id="option-buttonText">

   397   <div class="option-header">

   398     <h3 class="option-name"><a href="#option-buttonText">buttonText</a></h3>

   399     <dl>

   400       <dt class="option-type-label">Type:</dt>

   401         <dd class="option-type">String</dd>

   402       

   403       <dt class="option-default-label">Default:</dt>

   404         <dd class="option-default">'...'</dd>

   405       

   406     </dl>

   407   </div>

   408   <div class="option-description">

   409     <p>The text to display on the trigger button. Use in conjunction with <code><a href="http://docs.jquery.com/UI/Datepicker#option-showOn" title="UI/Datepicker">showOn</a></code> equal to 'button' or 'both'.</p>

   410   </div>

   411   <div class="option-examples">

   412     <h4>Code examples</h4>

   413     <dl class="option-examples-list">

   414     

   415 <dt>

   416   Initialize a datepicker with the <code>buttonText</code> option specified.

   417 </dt>

   418 <dd>

   419 <pre><code>$( ".selector" ).datepicker({ buttonText: 'Choose' });</code></pre>

   420 </dd>

   421 

   422     

   423 <dt>

   424   Get or set the <code>buttonText</code> option, after init.

   425 </dt>

   426 <dd>

   427 <pre><code>//getter

   428 var buttonText = $( ".selector" ).datepicker( "option", "buttonText" );

   429 //setter

   430 $( ".selector" ).datepicker( "option", "buttonText", 'Choose' );</code></pre>

   431 </dd>

   432 

   433     </dl>

   434   </div>

   435 </li>

   436 

   437 

   438 <li class="option" id="option-calculateWeek">

   439   <div class="option-header">

   440     <h3 class="option-name"><a href="#option-calculateWeek">calculateWeek</a></h3>

   441     <dl>

   442       <dt class="option-type-label">Type:</dt>

   443         <dd class="option-type">Function</dd>

   444       

   445       <dt class="option-default-label">Default:</dt>

   446         <dd class="option-default">$.datepicker.iso8601Week</dd>

   447       

   448     </dl>

   449   </div>

   450   <div class="option-description">

   451     <p>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.</p>

   452   </div>

   453   <div class="option-examples">

   454     <h4>Code examples</h4>

   455     <dl class="option-examples-list">

   456     

   457 <dt>

   458   Initialize a datepicker with the <code>calculateWeek</code> option specified.

   459 </dt>

   460 <dd>

   461 <pre><code>$( ".selector" ).datepicker({ calculateWeek: myWeekCalc });</code></pre>

   462 </dd>

   463 

   464     

   465 <dt>

   466   Get or set the <code>calculateWeek</code> option, after init.

   467 </dt>

   468 <dd>

   469 <pre><code>//getter

   470 var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" );

   471 //setter

   472 $( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );</code></pre>

   473 </dd>

   474 

   475     </dl>

   476   </div>

   477 </li>

   478 

   479 

   480 <li class="option" id="option-changeMonth">

   481   <div class="option-header">

   482     <h3 class="option-name"><a href="#option-changeMonth">changeMonth</a></h3>

   483     <dl>

   484       <dt class="option-type-label">Type:</dt>

   485         <dd class="option-type">Boolean</dd>

   486       

   487       <dt class="option-default-label">Default:</dt>

   488         <dd class="option-default">false</dd>

   489       

   490     </dl>

   491   </div>

   492   <div class="option-description">

   493     <p>Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to true.</p>

   494   </div>

   495   <div class="option-examples">

   496     <h4>Code examples</h4>

   497     <dl class="option-examples-list">

   498     

   499 <dt>

   500   Initialize a datepicker with the <code>changeMonth</code> option specified.

   501 </dt>

   502 <dd>

   503 <pre><code>$( ".selector" ).datepicker({ changeMonth: true });</code></pre>

   504 </dd>

   505 

   506     

   507 <dt>

   508   Get or set the <code>changeMonth</code> option, after init.

   509 </dt>

   510 <dd>

   511 <pre><code>//getter

   512 var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" );

   513 //setter

   514 $( ".selector" ).datepicker( "option", "changeMonth", true );</code></pre>

   515 </dd>

   516 

   517     </dl>

   518   </div>

   519 </li>

   520 

   521 

   522 <li class="option" id="option-changeYear">

   523   <div class="option-header">

   524     <h3 class="option-name"><a href="#option-changeYear">changeYear</a></h3>

   525     <dl>

   526       <dt class="option-type-label">Type:</dt>

   527         <dd class="option-type">Boolean</dd>

   528       

   529       <dt class="option-default-label">Default:</dt>

   530         <dd class="option-default">false</dd>

   531       

   532     </dl>

   533   </div>

   534   <div class="option-description">

   535     <p>Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true.</p>

   536   </div>

   537   <div class="option-examples">

   538     <h4>Code examples</h4>

   539     <dl class="option-examples-list">

   540     

   541 <dt>

   542   Initialize a datepicker with the <code>changeYear</code> option specified.

   543 </dt>

   544 <dd>

   545 <pre><code>$( ".selector" ).datepicker({ changeYear: true });</code></pre>

   546 </dd>

   547 

   548     

   549 <dt>

   550   Get or set the <code>changeYear</code> option, after init.

   551 </dt>

   552 <dd>

   553 <pre><code>//getter

   554 var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );

   555 //setter

   556 $( ".selector" ).datepicker( "option", "changeYear", true );</code></pre>

   557 </dd>

   558 

   559     </dl>

   560   </div>

   561 </li>

   562 

   563 

   564 <li class="option" id="option-closeText">

   565   <div class="option-header">

   566     <h3 class="option-name"><a href="#option-closeText">closeText</a></h3>

   567     <dl>

   568       <dt class="option-type-label">Type:</dt>

   569         <dd class="option-type">String</dd>

   570       

   571       <dt class="option-default-label">Default:</dt>

   572         <dd class="option-default">'Done'</dd>

   573       

   574     </dl>

   575   </div>

   576   <div class="option-description">

   577     <p>The text to display for the close link. This attribute is one of the regionalisation attributes. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-showButtonPanel" title="UI/Datepicker">showButtonPanel</a></code> to display this button.</p>

   578   </div>

   579   <div class="option-examples">

   580     <h4>Code examples</h4>

   581     <dl class="option-examples-list">

   582     

   583 <dt>

   584   Initialize a datepicker with the <code>closeText</code> option specified.

   585 </dt>

   586 <dd>

   587 <pre><code>$( ".selector" ).datepicker({ closeText: 'X' });</code></pre>

   588 </dd>

   589 

   590     

   591 <dt>

   592   Get or set the <code>closeText</code> option, after init.

   593 </dt>

   594 <dd>

   595 <pre><code>//getter

   596 var closeText = $( ".selector" ).datepicker( "option", "closeText" );

   597 //setter

   598 $( ".selector" ).datepicker( "option", "closeText", 'X' );</code></pre>

   599 </dd>

   600 

   601     </dl>

   602   </div>

   603 </li>

   604 

   605 

   606 <li class="option" id="option-constrainInput">

   607   <div class="option-header">

   608     <h3 class="option-name"><a href="#option-constrainInput">constrainInput</a></h3>

   609     <dl>

   610       <dt class="option-type-label">Type:</dt>

   611         <dd class="option-type">Boolean</dd>

   612       

   613       <dt class="option-default-label">Default:</dt>

   614         <dd class="option-default">true</dd>

   615       

   616     </dl>

   617   </div>

   618   <div class="option-description">

   619     <p>When true entry in the input field is constrained to those characters allowed by the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code>.</p>

   620   </div>

   621   <div class="option-examples">

   622     <h4>Code examples</h4>

   623     <dl class="option-examples-list">

   624     

   625 <dt>

   626   Initialize a datepicker with the <code>constrainInput</code> option specified.

   627 </dt>

   628 <dd>

   629 <pre><code>$( ".selector" ).datepicker({ constrainInput: false });</code></pre>

   630 </dd>

   631 

   632     

   633 <dt>

   634   Get or set the <code>constrainInput</code> option, after init.

   635 </dt>

   636 <dd>

   637 <pre><code>//getter

   638 var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );

   639 //setter

   640 $( ".selector" ).datepicker( "option", "constrainInput", false );</code></pre>

   641 </dd>

   642 

   643     </dl>

   644   </div>

   645 </li>

   646 

   647 

   648 <li class="option" id="option-currentText">

   649   <div class="option-header">

   650     <h3 class="option-name"><a href="#option-currentText">currentText</a></h3>

   651     <dl>

   652       <dt class="option-type-label">Type:</dt>

   653         <dd class="option-type">String</dd>

   654       

   655       <dt class="option-default-label">Default:</dt>

   656         <dd class="option-default">'Today'</dd>

   657       

   658     </dl>

   659   </div>

   660   <div class="option-description">

   661     <p>The text to display for the current day link. This attribute is one of the regionalisation attributes. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-showButtonPanel" title="UI/Datepicker">showButtonPanel</a></code> to display this button.</p>

   662   </div>

   663   <div class="option-examples">

   664     <h4>Code examples</h4>

   665     <dl class="option-examples-list">

   666     

   667 <dt>

   668   Initialize a datepicker with the <code>currentText</code> option specified.

   669 </dt>

   670 <dd>

   671 <pre><code>$( ".selector" ).datepicker({ currentText: 'Now' });</code></pre>

   672 </dd>

   673 

   674     

   675 <dt>

   676   Get or set the <code>currentText</code> option, after init.

   677 </dt>

   678 <dd>

   679 <pre><code>//getter

   680 var currentText = $( ".selector" ).datepicker( "option", "currentText" );

   681 //setter

   682 $( ".selector" ).datepicker( "option", "currentText", 'Now' );</code></pre>

   683 </dd>

   684 

   685     </dl>

   686   </div>

   687 </li>

   688 

   689 

   690 <li class="option" id="option-dateFormat">

   691   <div class="option-header">

   692     <h3 class="option-name"><a href="#option-dateFormat">dateFormat</a></h3>

   693     <dl>

   694       <dt class="option-type-label">Type:</dt>

   695         <dd class="option-type">String</dd>

   696       

   697       <dt class="option-default-label">Default:</dt>

   698         <dd class="option-default">'mm/dd/yy'</dd>

   699       

   700     </dl>

   701   </div>

   702   <div class="option-description">

   703     <p>The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the <code><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a></code> function.</p>

   704   </div>

   705   <div class="option-examples">

   706     <h4>Code examples</h4>

   707     <dl class="option-examples-list">

   708     

   709 <dt>

   710   Initialize a datepicker with the <code>dateFormat</code> option specified.

   711 </dt>

   712 <dd>

   713 <pre><code>$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });</code></pre>

   714 </dd>

   715 

   716     

   717 <dt>

   718   Get or set the <code>dateFormat</code> option, after init.

   719 </dt>

   720 <dd>

   721 <pre><code>//getter

   722 var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );

   723 //setter

   724 $( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );</code></pre>

   725 </dd>

   726 

   727     </dl>

   728   </div>

   729 </li>

   730 

   731 

   732 <li class="option" id="option-dayNames">

   733   <div class="option-header">

   734     <h3 class="option-name"><a href="#option-dayNames">dayNames</a></h3>

   735     <dl>

   736       <dt class="option-type-label">Type:</dt>

   737         <dd class="option-type">Array</dd>

   738       

   739       <dt class="option-default-label">Default:</dt>

   740         <dd class="option-default">['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</dd>

   741       

   742     </dl>

   743   </div>

   744   <div class="option-description">

   745     <p>The list of long day names, starting from Sunday, for use as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.</p>

   746   </div>

   747   <div class="option-examples">

   748     <h4>Code examples</h4>

   749     <dl class="option-examples-list">

   750     

   751 <dt>

   752   Initialize a datepicker with the <code>dayNames</code> option specified.

   753 </dt>

   754 <dd>

   755 <pre><code>$( ".selector" ).datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });</code></pre>

   756 </dd>

   757 

   758     

   759 <dt>

   760   Get or set the <code>dayNames</code> option, after init.

   761 </dt>

   762 <dd>

   763 <pre><code>//getter

   764 var dayNames = $( ".selector" ).datepicker( "option", "dayNames" );

   765 //setter

   766 $( ".selector" ).datepicker( "option", "dayNames", ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] );</code></pre>

   767 </dd>

   768 

   769     </dl>

   770   </div>

   771 </li>

   772 

   773 

   774 <li class="option" id="option-dayNamesMin">

   775   <div class="option-header">

   776     <h3 class="option-name"><a href="#option-dayNamesMin">dayNamesMin</a></h3>

   777     <dl>

   778       <dt class="option-type-label">Type:</dt>

   779         <dd class="option-type">Array</dd>

   780       

   781       <dt class="option-default-label">Default:</dt>

   782         <dd class="option-default">['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</dd>

   783       

   784     </dl>

   785   </div>

   786   <div class="option-description">

   787     <p>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes.</p>

   788   </div>

   789   <div class="option-examples">

   790     <h4>Code examples</h4>

   791     <dl class="option-examples-list">

   792     

   793 <dt>

   794   Initialize a datepicker with the <code>dayNamesMin</code> option specified.

   795 </dt>

   796 <dd>

   797 <pre><code>$( ".selector" ).datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });</code></pre>

   798 </dd>

   799 

   800     

   801 <dt>

   802   Get or set the <code>dayNamesMin</code> option, after init.

   803 </dt>

   804 <dd>

   805 <pre><code>//getter

   806 var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" );

   807 //setter

   808 $( ".selector" ).datepicker( "option", "dayNamesMin", ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] );</code></pre>

   809 </dd>

   810 

   811     </dl>

   812   </div>

   813 </li>

   814 

   815 

   816 <li class="option" id="option-dayNamesShort">

   817   <div class="option-header">

   818     <h3 class="option-name"><a href="#option-dayNamesShort">dayNamesShort</a></h3>

   819     <dl>

   820       <dt class="option-type-label">Type:</dt>

   821         <dd class="option-type">Array</dd>

   822       

   823       <dt class="option-default-label">Default:</dt>

   824         <dd class="option-default">['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</dd>

   825       

   826     </dl>

   827   </div>

   828   <div class="option-description">

   829     <p>The list of abbreviated day names, starting from Sunday, for use as requested via the <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> setting. This attribute is one of the regionalisation attributes.</p>

   830   </div>

   831   <div class="option-examples">

   832     <h4>Code examples</h4>

   833     <dl class="option-examples-list">

   834     

   835 <dt>

   836   Initialize a datepicker with the <code>dayNamesShort</code> option specified.

   837 </dt>

   838 <dd>

   839 <pre><code>$( ".selector" ).datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });</code></pre>

   840 </dd>

   841 

   842     

   843 <dt>

   844   Get or set the <code>dayNamesShort</code> option, after init.

   845 </dt>

   846 <dd>

   847 <pre><code>//getter

   848 var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" );

   849 //setter

   850 $( ".selector" ).datepicker( "option", "dayNamesShort", ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] );</code></pre>

   851 </dd>

   852 

   853     </dl>

   854   </div>

   855 </li>

   856 

   857 

   858 <li class="option" id="option-defaultDate">

   859   <div class="option-header">

   860     <h3 class="option-name"><a href="#option-defaultDate">defaultDate</a></h3>

   861     <dl>

   862       <dt class="option-type-label">Type:</dt>

   863         <dd class="option-type">Date, Number, String</dd>

   864       

   865       <dt class="option-default-label">Default:</dt>

   866         <dd class="option-default">null</dd>

   867       

   868     </dl>

   869   </div>

   870   <div class="option-description">

   871     <p>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><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></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.</p>

   872   </div>

   873   <div class="option-examples">

   874     <h4>Code examples</h4>

   875     <dl class="option-examples-list">

   876     

   877 <dt>

   878   Initialize a datepicker with the <code>defaultDate</code> option specified.

   879 </dt>

   880 <dd>

   881 <pre><code>$( ".selector" ).datepicker({ defaultDate: +7 });</code></pre>

   882 </dd>

   883 

   884     

   885 <dt>

   886   Get or set the <code>defaultDate</code> option, after init.

   887 </dt>

   888 <dd>

   889 <pre><code>//getter

   890 var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );

   891 //setter

   892 $( ".selector" ).datepicker( "option", "defaultDate", +7 );</code></pre>

   893 </dd>

   894 

   895     </dl>

   896   </div>

   897 </li>

   898 

   899 

   900 <li class="option" id="option-duration">

   901   <div class="option-header">

   902     <h3 class="option-name"><a href="#option-duration">duration</a></h3>

   903     <dl>

   904       <dt class="option-type-label">Type:</dt>

   905         <dd class="option-type">String, Number</dd>

   906       

   907       <dt class="option-default-label">Default:</dt>

   908         <dd class="option-default">'normal'</dd>

   909       

   910     </dl>

   911   </div>

   912   <div class="option-description">

   913     <p>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").</p>

   914   </div>

   915   <div class="option-examples">

   916     <h4>Code examples</h4>

   917     <dl class="option-examples-list">

   918     

   919 <dt>

   920   Initialize a datepicker with the <code>duration</code> option specified.

   921 </dt>

   922 <dd>

   923 <pre><code>$( ".selector" ).datepicker({ duration: 'slow' });</code></pre>

   924 </dd>

   925 

   926     

   927 <dt>

   928   Get or set the <code>duration</code> option, after init.

   929 </dt>

   930 <dd>

   931 <pre><code>//getter

   932 var duration = $( ".selector" ).datepicker( "option", "duration" );

   933 //setter

   934 $( ".selector" ).datepicker( "option", "duration", 'slow' );</code></pre>

   935 </dd>

   936 

   937     </dl>

   938   </div>

   939 </li>

   940 

   941 

   942 <li class="option" id="option-firstDay">

   943   <div class="option-header">

   944     <h3 class="option-name"><a href="#option-firstDay">firstDay</a></h3>

   945     <dl>

   946       <dt class="option-type-label">Type:</dt>

   947         <dd class="option-type">Number</dd>

   948       

   949       <dt class="option-default-label">Default:</dt>

   950         <dd class="option-default">0</dd>

   951       

   952     </dl>

   953   </div>

   954   <div class="option-description">

   955     <p>Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.</p>

   956   </div>

   957   <div class="option-examples">

   958     <h4>Code examples</h4>

   959     <dl class="option-examples-list">

   960     

   961 <dt>

   962   Initialize a datepicker with the <code>firstDay</code> option specified.

   963 </dt>

   964 <dd>

   965 <pre><code>$( ".selector" ).datepicker({ firstDay: 1 });</code></pre>

   966 </dd>

   967 

   968     

   969 <dt>

   970   Get or set the <code>firstDay</code> option, after init.

   971 </dt>

   972 <dd>

   973 <pre><code>//getter

   974 var firstDay = $( ".selector" ).datepicker( "option", "firstDay" );

   975 //setter

   976 $( ".selector" ).datepicker( "option", "firstDay", 1 );</code></pre>

   977 </dd>

   978 

   979     </dl>

   980   </div>

   981 </li>

   982 

   983 

   984 <li class="option" id="option-gotoCurrent">

   985   <div class="option-header">

   986     <h3 class="option-name"><a href="#option-gotoCurrent">gotoCurrent</a></h3>

   987     <dl>

   988       <dt class="option-type-label">Type:</dt>

   989         <dd class="option-type">Boolean</dd>

   990       

   991       <dt class="option-default-label">Default:</dt>

   992         <dd class="option-default">false</dd>

   993       

   994     </dl>

   995   </div>

   996   <div class="option-description">

   997     <p>When true the current day link moves to the currently selected date instead of today.</p>

   998   </div>

   999   <div class="option-examples">

  1000     <h4>Code examples</h4>

  1001     <dl class="option-examples-list">

  1002     

  1003 <dt>

  1004   Initialize a datepicker with the <code>gotoCurrent</code> option specified.

  1005 </dt>

  1006 <dd>

  1007 <pre><code>$( ".selector" ).datepicker({ gotoCurrent: true });</code></pre>

  1008 </dd>

  1009 

  1010     

  1011 <dt>

  1012   Get or set the <code>gotoCurrent</code> option, after init.

  1013 </dt>

  1014 <dd>

  1015 <pre><code>//getter

  1016 var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" );

  1017 //setter

  1018 $( ".selector" ).datepicker( "option", "gotoCurrent", true );</code></pre>

  1019 </dd>

  1020 

  1021     </dl>

  1022   </div>

  1023 </li>

  1024 

  1025 

  1026 <li class="option" id="option-hideIfNoPrevNext">

  1027   <div class="option-header">

  1028     <h3 class="option-name"><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></h3>

  1029     <dl>

  1030       <dt class="option-type-label">Type:</dt>

  1031         <dd class="option-type">Boolean</dd>

  1032       

  1033       <dt class="option-default-label">Default:</dt>

  1034         <dd class="option-default">false</dd>

  1035       

  1036     </dl>

  1037   </div>

  1038   <div class="option-description">

  1039     <p>Normally the previous and next links are disabled when not applicable (see <code><a href="http://docs.jquery.com/UI/Datepicker#option-minDate" title="UI/Datepicker">minDate</a></code>/<code><a href="http://docs.jquery.com/UI/Datepicker#option-maxDate" title="UI/Datepicker">maxDate</a></code>). You can hide them altogether by setting this attribute to true.</p>

  1040   </div>

  1041   <div class="option-examples">

  1042     <h4>Code examples</h4>

  1043     <dl class="option-examples-list">

  1044     

  1045 <dt>

  1046   Initialize a datepicker with the <code>hideIfNoPrevNext</code> option specified.

  1047 </dt>

  1048 <dd>

  1049 <pre><code>$( ".selector" ).datepicker({ hideIfNoPrevNext: true });</code></pre>

  1050 </dd>

  1051 

  1052     

  1053 <dt>

  1054   Get or set the <code>hideIfNoPrevNext</code> option, after init.

  1055 </dt>

  1056 <dd>

  1057 <pre><code>//getter

  1058 var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );

  1059 //setter

  1060 $( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );</code></pre>

  1061 </dd>

  1062 

  1063     </dl>

  1064   </div>

  1065 </li>

  1066 

  1067 

  1068 <li class="option" id="option-isRTL">

  1069   <div class="option-header">

  1070     <h3 class="option-name"><a href="#option-isRTL">isRTL</a></h3>

  1071     <dl>

  1072       <dt class="option-type-label">Type:</dt>

  1073         <dd class="option-type">Boolean</dd>

  1074       

  1075       <dt class="option-default-label">Default:</dt>

  1076         <dd class="option-default">false</dd>

  1077       

  1078     </dl>

  1079   </div>

  1080   <div class="option-description">

  1081     <p>True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes.</p>

  1082   </div>

  1083   <div class="option-examples">

  1084     <h4>Code examples</h4>

  1085     <dl class="option-examples-list">

  1086     

  1087 <dt>

  1088   Initialize a datepicker with the <code>isRTL</code> option specified.

  1089 </dt>

  1090 <dd>

  1091 <pre><code>$( ".selector" ).datepicker({ isRTL: true });</code></pre>

  1092 </dd>

  1093 

  1094     

  1095 <dt>

  1096   Get or set the <code>isRTL</code> option, after init.

  1097 </dt>

  1098 <dd>

  1099 <pre><code>//getter

  1100 var isRTL = $( ".selector" ).datepicker( "option", "isRTL" );

  1101 //setter

  1102 $( ".selector" ).datepicker( "option", "isRTL", true );</code></pre>

  1103 </dd>

  1104 

  1105     </dl>

  1106   </div>

  1107 </li>

  1108 

  1109 

  1110 <li class="option" id="option-maxDate">

  1111   <div class="option-header">

  1112     <h3 class="option-name"><a href="#option-maxDate">maxDate</a></h3>

  1113     <dl>

  1114       <dt class="option-type-label">Type:</dt>

  1115         <dd class="option-type">Date, Number, String</dd>

  1116       

  1117       <dt class="option-default-label">Default:</dt>

  1118         <dd class="option-default">null</dd>

  1119       

  1120     </dl>

  1121   </div>

  1122   <div class="option-description">

  1123     <p>Set a maximum selectable date via a Date object or as a string in the current <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></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 +1w'), or null for no limit.</p>

  1124   </div>

  1125   <div class="option-examples">

  1126     <h4>Code examples</h4>

  1127     <dl class="option-examples-list">

  1128     

  1129 <dt>

  1130   Initialize a datepicker with the <code>maxDate</code> option specified.

  1131 </dt>

  1132 <dd>

  1133 <pre><code>$( ".selector" ).datepicker({ maxDate: '+1m +1w' });</code></pre>

  1134 </dd>