js/jqueryui/docs/datepicker.html

   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 is 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/parseDate" title="UI/Datepicker/parseDate">$.datepicker.parseDate( format, value, settings ) </a> - Extract a date from a string value with a specified format.</li>
  33  <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>
  34  <li><a href="http://docs.jquery.com/UI/Datepicker/noWeekends" title="UI/Datepicker/noWeekends">$.datepicker.noWeekends</a> - Set as beforeShowDay function to prevent selection of weekends.</li>
  35 </ul>
  36 <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>
  37 <p>Datepicker provides support for localizing its content to cater for different languages
  38         and date formats. Each localization is contained within its own file with the
  39         language code appended to the name, e.g. <code>jquery.ui.datepicker-fr.js</code> for French.
  40         The desired localization file should be include after the main datepicker code. They add their settings to the set
  41         of available localizations and automatically apply them as defaults for all instances.</p>
  42 <p>The <code>$.datepicker.regional</code> attribute holds an array of localizations,
  43         indexed by language code, with '' referring to the default (English). Each entry is
  44         an object with the following attributes: <code>closeText</code>, <code>prevText</code>,
  45         <code>nextText</code>, <code>currentText</code>, <code>monthNames</code>,
  46         <code>monthNamesShort</code>, <code>dayNames</code>, <code>dayNamesShort</code>,
  47         <code>dayNamesMin</code>, <code>weekHeader</code>, <code>dateFormat</code>,
  48         <code>firstDay</code>, <code>isRTL</code>, <code>showMonthAfterYear</code>,
  49         and <code>yearSuffix</code>.</p>
  50 <p>You can restore the default localizations with:</p>
  51 <p><code>$.datepicker.setDefaults($.datepicker.regional['']);</code>
  52 </p>
  53 <p>And can then override an individual datepicker for a specific locale:</p>
  54 <p><code>$(selector).datepicker($.datepicker.regional['fr']);</code>
  55 </p>
  56 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>
  57     </div>
  58     <div id="overview-dependencies">
  59         <h3>Dependencies</h3>
  60         <ul>
  61 <li>UI Core</li>
  62 </ul>
  63     </div>
  64     <div id="overview-example">
  65         <h3>Example</h3>
  66         <div id="overview-example" class="example">
  67 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  68 <p><div id="demo" class="tabs-container" rel="220">
  69 A simple jQuery UI Datepicker.<br />
  70 </p>
  71 <pre>$(&quot;#datepicker&quot;).datepicker();
  72 </pre>
  73 <p></div><div id="source" class="tabs-container">
  74 </p>
  75 <pre>&lt;!DOCTYPE html&gt;
  76 &lt;html&gt;
  77 &lt;head&gt;
  78   &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  79   &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  80   &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  81
  82   &lt;script&gt;
  83   $(document).ready(function() {
  84     $(&quot;#datepicker&quot;).datepicker();
  85   });
  86   &lt;/script&gt;
  87 &lt;/head&gt;
  88 &lt;body style="font-size:62.5%;"&gt;
  89
  90 &lt;div type=&quot;text&quot; id=&quot;datepicker&quot;&gt;&lt;/div&gt;
  91
  92 &lt;/body&gt;
  93 &lt;/html&gt;
  94 </pre>
  95 <p></div>
  96 </p><p></div>
  97     </div>
  98   </div>
  99   <div id="options">
 100     <h2 class="top-header">Options</h2>
 101     <ul class="options-list">
 102
 103 <li class="option" id="option-disabled">
 104   <div class="option-header">
 105     <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
 106     <dl>
 107       <dt class="option-type-label">Type:</dt>
 108         <dd class="option-type">Boolean</dd>
 109
 110       <dt class="option-default-label">Default:</dt>
 111         <dd class="option-default">false</dd>
 112
 113     </dl>
 114   </div>
 115   <div class="option-description">
 116     <p>Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker.</p>
 117   </div>
 118   <div class="option-examples">
 119     <h4>Code examples</h4>
 120     <dl class="option-examples-list">
 121
 122 <dt>
 123   Initialize a datepicker with the <code>disabled</code> option specified.
 124 </dt>
 125 <dd>
 126 <pre><code>$( ".selector" ).datepicker({ disabled: true });</code></pre>
 127 </dd>
 128
 129
 130 <dt>
 131   Get or set the <code>disabled</code> option, after init.
 132 </dt>
 133 <dd>
 134 <pre><code>//getter
 135 var disabled = $( ".selector" ).datepicker( "option", "disabled" );
 136 //setter
 137 $( ".selector" ).datepicker( "option", "disabled", true );</code></pre>
 138 </dd>
 139
 140     </dl>
 141   </div>
 142 </li>
 143
 144
 145 <li class="option" id="option-altField">
 146   <div class="option-header">
 147     <h3 class="option-name"><a href="#option-altField">altField</a></h3>
 148     <dl>
 149       <dt class="option-type-label">Type:</dt>
 150         <dd class="option-type">String</dd>
 151
 152       <dt class="option-default-label">Default:</dt>
 153         <dd class="option-default">''</dd>
 154
 155     </dl>
 156   </div>
 157   <div class="option-description">
 158     <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>
 159   </div>
 160   <div class="option-examples">
 161     <h4>Code examples</h4>
 162     <dl class="option-examples-list">
 163
 164 <dt>
 165   Initialize a datepicker with the <code>altField</code> option specified.
 166 </dt>
 167 <dd>
 168 <pre><code>$( ".selector" ).datepicker({ altField: '#actualDate' });</code></pre>
 169 </dd>
 170
 171
 172 <dt>
 173   Get or set the <code>altField</code> option, after init.
 174 </dt>
 175 <dd>
 176 <pre><code>//getter
 177 var altField = $( ".selector" ).datepicker( "option", "altField" );
 178 //setter
 179 $( ".selector" ).datepicker( "option", "altField", '#actualDate' );</code></pre>
 180 </dd>
 181
 182     </dl>
 183   </div>
 184 </li>
 185
 186
 187 <li class="option" id="option-altFormat">
 188   <div class="option-header">
 189     <h3 class="option-name"><a href="#option-altFormat">altFormat</a></h3>
 190     <dl>
 191       <dt class="option-type-label">Type:</dt>
 192         <dd class="option-type">String</dd>
 193
 194       <dt class="option-default-label">Default:</dt>
 195         <dd class="option-default">''</dd>
 196
 197     </dl>
 198   </div>
 199   <div class="option-description">
 200     <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>
 201   </div>
 202   <div class="option-examples">
 203     <h4>Code examples</h4>
 204     <dl class="option-examples-list">
 205
 206 <dt>
 207   Initialize a datepicker with the <code>altFormat</code> option specified.
 208 </dt>
 209 <dd>
 210 <pre><code>$( ".selector" ).datepicker({ altFormat: 'yy-mm-dd' });</code></pre>
 211 </dd>
 212
 213
 214 <dt>
 215   Get or set the <code>altFormat</code> option, after init.
 216 </dt>
 217 <dd>
 218 <pre><code>//getter
 219 var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );
 220 //setter
 221 $( ".selector" ).datepicker( "option", "altFormat", 'yy-mm-dd' );</code></pre>
 222 </dd>
 223
 224     </dl>
 225   </div>
 226 </li>
 227
 228
 229 <li class="option" id="option-appendText">
 230   <div class="option-header">
 231     <h3 class="option-name"><a href="#option-appendText">appendText</a></h3>
 232     <dl>
 233       <dt class="option-type-label">Type:</dt>
 234         <dd class="option-type">String</dd>
 235
 236       <dt class="option-default-label">Default:</dt>
 237         <dd class="option-default">''</dd>
 238
 239     </dl>
 240   </div>
 241   <div class="option-description">
 242     <p>The text to display after each date field, e.g. to show the required format.</p>
 243   </div>
 244   <div class="option-examples">
 245     <h4>Code examples</h4>
 246     <dl class="option-examples-list">
 247
 248 <dt>
 249   Initialize a datepicker with the <code>appendText</code> option specified.
 250 </dt>
 251 <dd>
 252 <pre><code>$( ".selector" ).datepicker({ appendText: '(yyyy-mm-dd)' });</code></pre>
 253 </dd>
 254
 255
 256 <dt>
 257   Get or set the <code>appendText</code> option, after init.
 258 </dt>
 259 <dd>
 260 <pre><code>//getter
 261 var appendText = $( ".selector" ).datepicker( "option", "appendText" );
 262 //setter
 263 $( ".selector" ).datepicker( "option", "appendText", '(yyyy-mm-dd)' );</code></pre>
 264 </dd>
 265
 266     </dl>
 267   </div>
 268 </li>
 269
 270
 271 <li class="option" id="option-autoSize">
 272   <div class="option-header">
 273     <h3 class="option-name"><a href="#option-autoSize">autoSize</a></h3>
 274     <dl>
 275       <dt class="option-type-label">Type:</dt>
 276         <dd class="option-type">Boolean</dd>
 277
 278       <dt class="option-default-label">Default:</dt>
 279         <dd class="option-default">false</dd>
 280
 281     </dl>
 282   </div>
 283   <div class="option-description">
 284     <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>
 285   </div>
 286   <div class="option-examples">
 287     <h4>Code examples</h4>
 288     <dl class="option-examples-list">
 289
 290 <dt>
 291   Initialize a datepicker with the <code>autoSize</code> option specified.
 292 </dt>
 293 <dd>
 294 <pre><code>$( ".selector" ).datepicker({ autoSize: true });</code></pre>
 295 </dd>
 296
 297
 298 <dt>
 299   Get or set the <code>autoSize</code> option, after init.
 300 </dt>
 301 <dd>
 302 <pre><code>//getter
 303 var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );
 304 //setter
 305 $( ".selector" ).datepicker( "option", "autoSize", true );</code></pre>
 306 </dd>
 307
 308     </dl>
 309   </div>
 310 </li>
 311
 312
 313 <li class="option" id="option-buttonImage">
 314   <div class="option-header">
 315     <h3 class="option-name"><a href="#option-buttonImage">buttonImage</a></h3>
 316     <dl>
 317       <dt class="option-type-label">Type:</dt>
 318         <dd class="option-type">String</dd>
 319
 320       <dt class="option-default-label">Default:</dt>
 321         <dd class="option-default">''</dd>
 322
 323     </dl>
 324   </div>
 325   <div class="option-description">
 326     <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>
 327   </div>
 328   <div class="option-examples">
 329     <h4>Code examples</h4>
 330     <dl class="option-examples-list">
 331
 332 <dt>
 333   Initialize a datepicker with the <code>buttonImage</code> option specified.
 334 </dt>
 335 <dd>
 336 <pre><code>$( ".selector" ).datepicker({ buttonImage: '/images/datepicker.gif' });</code></pre>
 337 </dd>
 338
 339
 340 <dt>
 341   Get or set the <code>buttonImage</code> option, after init.
 342 </dt>
 343 <dd>
 344 <pre><code>//getter
 345 var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" );
 346 //setter
 347 $( ".selector" ).datepicker( "option", "buttonImage", '/images/datepicker.gif' );</code></pre>
 348 </dd>
 349
 350     </dl>
 351   </div>
 352 </li>
 353
 354
 355 <li class="option" id="option-buttonImageOnly">
 356   <div class="option-header">
 357     <h3 class="option-name"><a href="#option-buttonImageOnly">buttonImageOnly</a></h3>
 358     <dl>
 359       <dt class="option-type-label">Type:</dt>
 360         <dd class="option-type">Boolean</dd>
 361
 362       <dt class="option-default-label">Default:</dt>
 363         <dd class="option-default">false</dd>
 364
 365     </dl>
 366   </div>
 367   <div class="option-description">
 368     <p>Set to true to place an image after the field to use as the trigger without it appearing on a button.</p>
 369   </div>
 370   <div class="option-examples">
 371     <h4>Code examples</h4>
 372     <dl class="option-examples-list">
 373
 374 <dt>
 375   Initialize a datepicker with the <code>buttonImageOnly</code> option specified.
 376 </dt>
 377 <dd>
 378 <pre><code>$( ".selector" ).datepicker({ buttonImageOnly: true });</code></pre>
 379 </dd>
 380
 381
 382 <dt>
 383   Get or set the <code>buttonImageOnly</code> option, after init.
 384 </dt>
 385 <dd>
 386 <pre><code>//getter
 387 var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );
 388 //setter
 389 $( ".selector" ).datepicker( "option", "buttonImageOnly", true );</code></pre>
 390 </dd>
 391
 392     </dl>
 393   </div>
 394 </li>
 395
 396
 397 <li class="option" id="option-buttonText">
 398   <div class="option-header">
 399     <h3 class="option-name"><a href="#option-buttonText">buttonText</a></h3>
 400     <dl>
 401       <dt class="option-type-label">Type:</dt>
 402         <dd class="option-type">String</dd>
 403
 404       <dt class="option-default-label">Default:</dt>
 405         <dd class="option-default">'...'</dd>
 406
 407     </dl>
 408   </div>
 409   <div class="option-description">
 410     <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>
 411   </div>
 412   <div class="option-examples">
 413     <h4>Code examples</h4>
 414     <dl class="option-examples-list">
 415
 416 <dt>
 417   Initialize a datepicker with the <code>buttonText</code> option specified.
 418 </dt>
 419 <dd>
 420 <pre><code>$( ".selector" ).datepicker({ buttonText: 'Choose' });</code></pre>
 421 </dd>
 422
 423
 424 <dt>
 425   Get or set the <code>buttonText</code> option, after init.
 426 </dt>
 427 <dd>
 428 <pre><code>//getter
 429 var buttonText = $( ".selector" ).datepicker( "option", "buttonText" );
 430 //setter
 431 $( ".selector" ).datepicker( "option", "buttonText", 'Choose' );</code></pre>
 432 </dd>
 433
 434     </dl>
 435   </div>
 436 </li>
 437
 438
 439 <li class="option" id="option-calculateWeek">
 440   <div class="option-header">
 441     <h3 class="option-name"><a href="#option-calculateWeek">calculateWeek</a></h3>
 442     <dl>
 443       <dt class="option-type-label">Type:</dt>
 444         <dd class="option-type">Function</dd>
 445
 446       <dt class="option-default-label">Default:</dt>
 447         <dd class="option-default">$.datepicker.iso8601Week</dd>
 448
 449     </dl>
 450   </div>
 451   <div class="option-description">
 452     <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>
 453   </div>
 454   <div class="option-examples">
 455     <h4>Code examples</h4>
 456     <dl class="option-examples-list">
 457
 458 <dt>
 459   Initialize a datepicker with the <code>calculateWeek</code> option specified.
 460 </dt>
 461 <dd>
 462 <pre><code>$( ".selector" ).datepicker({ calculateWeek: myWeekCalc });</code></pre>
 463 </dd>
 464
 465
 466 <dt>
 467   Get or set the <code>calculateWeek</code> option, after init.
 468 </dt>
 469 <dd>
 470 <pre><code>//getter
 471 var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" );
 472 //setter
 473 $( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );</code></pre>
 474 </dd>
 475
 476     </dl>
 477   </div>
 478 </li>
 479
 480
 481 <li class="option" id="option-changeMonth">
 482   <div class="option-header">
 483     <h3 class="option-name"><a href="#option-changeMonth">changeMonth</a></h3>
 484     <dl>
 485       <dt class="option-type-label">Type:</dt>
 486         <dd class="option-type">Boolean</dd>
 487
 488       <dt class="option-default-label">Default:</dt>
 489         <dd class="option-default">false</dd>
 490
 491     </dl>
 492   </div>
 493   <div class="option-description">
 494     <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>
 495   </div>
 496   <div class="option-examples">
 497     <h4>Code examples</h4>
 498     <dl class="option-examples-list">
 499
 500 <dt>
 501   Initialize a datepicker with the <code>changeMonth</code> option specified.
 502 </dt>
 503 <dd>
 504 <pre><code>$( ".selector" ).datepicker({ changeMonth: true });</code></pre>
 505 </dd>
 506
 507
 508 <dt>
 509   Get or set the <code>changeMonth</code> option, after init.
 510 </dt>
 511 <dd>
 512 <pre><code>//getter
 513 var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" );
 514 //setter
 515 $( ".selector" ).datepicker( "option", "changeMonth", true );</code></pre>
 516 </dd>
 517
 518     </dl>
 519   </div>
 520 </li>
 521
 522
 523 <li class="option" id="option-changeYear">
 524   <div class="option-header">
 525     <h3 class="option-name"><a href="#option-changeYear">changeYear</a></h3>
 526     <dl>
 527       <dt class="option-type-label">Type:</dt>
 528         <dd class="option-type">Boolean</dd>
 529
 530       <dt class="option-default-label">Default:</dt>
 531         <dd class="option-default">false</dd>
 532
 533     </dl>
 534   </div>
 535   <div class="option-description">
 536     <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. Use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-yearRange" title="UI/Datepicker">yearRange</a></code> option to control which years are made available for selection.</p>
 537   </div>
 538   <div class="option-examples">
 539     <h4>Code examples</h4>
 540     <dl class="option-examples-list">
 541
 542 <dt>
 543   Initialize a datepicker with the <code>changeYear</code> option specified.
 544 </dt>
 545 <dd>
 546 <pre><code>$( ".selector" ).datepicker({ changeYear: true });</code></pre>
 547 </dd>
 548
 549
 550 <dt>
 551   Get or set the <code>changeYear</code> option, after init.
 552 </dt>
 553 <dd>
 554 <pre><code>//getter
 555 var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
 556 //setter
 557 $( ".selector" ).datepicker( "option", "changeYear", true );</code></pre>
 558 </dd>
 559
 560     </dl>
 561   </div>
 562 </li>
 563
 564
 565 <li class="option" id="option-closeText">
 566   <div class="option-header">
 567     <h3 class="option-name"><a href="#option-closeText">closeText</a></h3>
 568     <dl>
 569       <dt class="option-type-label">Type:</dt>
 570         <dd class="option-type">String</dd>
 571
 572       <dt class="option-default-label">Default:</dt>
 573         <dd class="option-default">'Done'</dd>
 574
 575     </dl>
 576   </div>
 577   <div class="option-description">
 578     <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>
 579   </div>
 580   <div class="option-examples">
 581     <h4>Code examples</h4>
 582     <dl class="option-examples-list">
 583
 584 <dt>
 585   Initialize a datepicker with the <code>closeText</code> option specified.
 586 </dt>
 587 <dd>
 588 <pre><code>$( ".selector" ).datepicker({ closeText: 'X' });</code></pre>
 589 </dd>
 590
 591
 592 <dt>
 593   Get or set the <code>closeText</code> option, after init.
 594 </dt>
 595 <dd>
 596 <pre><code>//getter
 597 var closeText = $( ".selector" ).datepicker( "option", "closeText" );
 598 //setter
 599 $( ".selector" ).datepicker( "option", "closeText", 'X' );</code></pre>
 600 </dd>
 601
 602     </dl>
 603   </div>
 604 </li>
 605
 606
 607 <li class="option" id="option-constrainInput">
 608   <div class="option-header">
 609     <h3 class="option-name"><a href="#option-constrainInput">constrainInput</a></h3>
 610     <dl>
 611       <dt class="option-type-label">Type:</dt>
 612         <dd class="option-type">Boolean</dd>
 613
 614       <dt class="option-default-label">Default:</dt>
 615         <dd class="option-default">true</dd>
 616
 617     </dl>
 618   </div>
 619   <div class="option-description">
 620     <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>
 621   </div>
 622   <div class="option-examples">
 623     <h4>Code examples</h4>
 624     <dl class="option-examples-list">
 625
 626 <dt>
 627   Initialize a datepicker with the <code>constrainInput</code> option specified.
 628 </dt>
 629 <dd>
 630 <pre><code>$( ".selector" ).datepicker({ constrainInput: false });</code></pre>
 631 </dd>
 632
 633
 634 <dt>
 635   Get or set the <code>constrainInput</code> option, after init.
 636 </dt>
 637 <dd>
 638 <pre><code>//getter
 639 var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );
 640 //setter
 641 $( ".selector" ).datepicker( "option", "constrainInput", false );</code></pre>
 642 </dd>
 643
 644     </dl>
 645   </div>
 646 </li>
 647
 648
 649 <li class="option" id="option-currentText">
 650   <div class="option-header">
 651     <h3 class="option-name"><a href="#option-currentText">currentText</a></h3>
 652     <dl>
 653       <dt class="option-type-label">Type:</dt>
 654         <dd class="option-type">String</dd>
 655
 656       <dt class="option-default-label">Default:</dt>
 657         <dd class="option-default">'Today'</dd>
 658
 659     </dl>
 660   </div>
 661   <div class="option-description">
 662     <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>
 663   </div>
 664   <div class="option-examples">
 665     <h4>Code examples</h4>
 666     <dl class="option-examples-list">
 667
 668 <dt>
 669   Initialize a datepicker with the <code>currentText</code> option specified.
 670 </dt>
 671 <dd>
 672 <pre><code>$( ".selector" ).datepicker({ currentText: 'Now' });</code></pre>
 673 </dd>
 674
 675
 676 <dt>
 677   Get or set the <code>currentText</code> option, after init.
 678 </dt>
 679 <dd>
 680 <pre><code>//getter
 681 var currentText = $( ".selector" ).datepicker( "option", "currentText" );
 682 //setter
 683 $( ".selector" ).datepicker( "option", "currentText", 'Now' );</code></pre>
 684 </dd>
 685
 686     </dl>
 687   </div>
 688 </li>
 689
 690
 691 <li class="option" id="option-dateFormat">
 692   <div class="option-header">
 693     <h3 class="option-name"><a href="#option-dateFormat">dateFormat</a></h3>
 694     <dl>
 695       <dt class="option-type-label">Type:</dt>
 696         <dd class="option-type">String</dd>
 697
 698       <dt class="option-default-label">Default:</dt>
 699         <dd class="option-default">'mm/dd/yy'</dd>
 700
 701     </dl>
 702   </div>
 703   <div class="option-description">
 704     <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>
 705   </div>
 706   <div class="option-examples">
 707     <h4>Code examples</h4>
 708     <dl class="option-examples-list">
 709
 710 <dt>
 711   Initialize a datepicker with the <code>dateFormat</code> option specified.
 712 </dt>
 713 <dd>
 714 <pre><code>$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });</code></pre>
 715 </dd>
 716
 717
 718 <dt>
 719   Get or set the <code>dateFormat</code> option, after init.
 720 </dt>
 721 <dd>
 722 <pre><code>//getter
 723 var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
 724 //setter
 725 $( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );</code></pre>
 726 </dd>
 727
 728     </dl>
 729   </div>
 730 </li>
 731
 732
 733 <li class="option" id="option-dayNames">
 734   <div class="option-header">
 735     <h3 class="option-name"><a href="#option-dayNames">dayNames</a></h3>
 736     <dl>
 737       <dt class="option-type-label">Type:</dt>
 738         <dd class="option-type">Array</dd>
 739
 740       <dt class="option-default-label">Default:</dt>
 741         <dd class="option-default">['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</dd>
 742
 743     </dl>
 744   </div>
 745   <div class="option-description">
 746     <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>
 747   </div>
 748   <div class="option-examples">
 749     <h4>Code examples</h4>
 750     <dl class="option-examples-list">
 751
 752 <dt>
 753   Initialize a datepicker with the <code>dayNames</code> option specified.
 754 </dt>
 755 <dd>
 756 <pre><code>$( ".selector" ).datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });</code></pre>
 757 </dd>
 758
 759
 760 <dt>
 761   Get or set the <code>dayNames</code> option, after init.
 762 </dt>
 763 <dd>
 764 <pre><code>//getter
 765 var dayNames = $( ".selector" ).datepicker( "option", "dayNames" );
 766 //setter
 767 $( ".selector" ).datepicker( "option", "dayNames", ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] );</code></pre>
 768 </dd>
 769
 770     </dl>
 771   </div>
 772 </li>
 773
 774
 775 <li class="option" id="option-dayNamesMin">
 776   <div class="option-header">
 777     <h3 class="option-name"><a href="#option-dayNamesMin">dayNamesMin</a></h3>
 778     <dl>
 779       <dt class="option-type-label">Type:</dt>
 780         <dd class="option-type">Array</dd>
 781
 782       <dt class="option-default-label">Default:</dt>
 783         <dd class="option-default">['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</dd>
 784
 785     </dl>
 786   </div>
 787   <div class="option-description">
 788     <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>
 789   </div>
 790   <div class="option-examples">
 791     <h4>Code examples</h4>
 792     <dl class="option-examples-list">
 793
 794 <dt>
 795   Initialize a datepicker with the <code>dayNamesMin</code> option specified.
 796 </dt>
 797 <dd>
 798 <pre><code>$( ".selector" ).datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });</code></pre>
 799 </dd>
 800
 801
 802 <dt>
 803   Get or set the <code>dayNamesMin</code> option, after init.
 804 </dt>
 805 <dd>
 806 <pre><code>//getter
 807 var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" );
 808 //setter
 809 $( ".selector" ).datepicker( "option", "dayNamesMin", ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] );</code></pre>
 810 </dd>
 811
 812     </dl>
 813   </div>
 814 </li>
 815
 816
 817 <li class="option" id="option-dayNamesShort">
 818   <div class="option-header">
 819     <h3 class="option-name"><a href="#option-dayNamesShort">dayNamesShort</a></h3>
 820     <dl>
 821       <dt class="option-type-label">Type:</dt>
 822         <dd class="option-type">Array</dd>
 823
 824       <dt class="option-default-label">Default:</dt>
 825         <dd class="option-default">['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</dd>
 826
 827     </dl>
 828   </div>
 829   <div class="option-description">
 830     <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>
 831   </div>
 832   <div class="option-examples">
 833     <h4>Code examples</h4>
 834     <dl class="option-examples-list">
 835
 836 <dt>
 837   Initialize a datepicker with the <code>dayNamesShort</code> option specified.
 838 </dt>
 839 <dd>
 840 <pre><code>$( ".selector" ).datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });</code></pre>
 841 </dd>
 842
 843
 844 <dt>
 845   Get or set the <code>dayNamesShort</code> option, after init.
 846 </dt>
 847 <dd>
 848 <pre><code>//getter
 849 var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" );
 850 //setter
 851 $( ".selector" ).datepicker( "option", "dayNamesShort", ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] );</code></pre>
 852 </dd>
 853
 854     </dl>
 855   </div>
 856 </li>
 857
 858
 859 <li class="option" id="option-defaultDate">
 860   <div class="option-header">
 861     <h3 class="option-name"><a href="#option-defaultDate">defaultDate</a></h3>
 862     <dl>
 863       <dt class="option-type-label">Type:</dt>
 864         <dd class="option-type">Date, Number, String</dd>
 865
 866       <dt class="option-default-label">Default:</dt>
 867         <dd class="option-default">null</dd>
 868
 869     </dl>
 870   </div>
 871   <div class="option-description">
 872     <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>
 873   </div>
 874   <div class="option-examples">
 875     <h4>Code examples</h4>
 876     <dl class="option-examples-list">
 877
 878 <dt>
 879   Initialize a datepicker with the <code>defaultDate</code> option specified.
 880 </dt>
 881 <dd>
 882 <pre><code>$( ".selector" ).datepicker({ defaultDate: +7 });</code></pre>
 883 </dd>
 884
 885
 886 <dt>
 887   Get or set the <code>defaultDate</code> option, after init.
 888 </dt>
 889 <dd>
 890 <pre><code>//getter
 891 var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
 892 //setter
 893 $( ".selector" ).datepicker( "option", "defaultDate", +7 );</code></pre>
 894 </dd>
 895
 896     </dl>
 897   </div>
 898 </li>
 899
 900
 901 <li class="option" id="option-duration">
 902   <div class="option-header">
 903     <h3 class="option-name"><a href="#option-duration">duration</a></h3>
 904     <dl>
 905       <dt class="option-type-label">Type:</dt>
 906         <dd class="option-type">String, Number</dd>
 907
 908       <dt class="option-default-label">Default:</dt>
 909         <dd class="option-default">'normal'</dd>
 910
 911     </dl>
 912   </div>
 913   <div class="option-description">
 914     <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>
 915   </div>
 916   <div class="option-examples">
 917     <h4>Code examples</h4>
 918     <dl class="option-examples-list">
 919
 920 <dt>
 921   Initialize a datepicker with the <code>duration</code> option specified.
 922 </dt>
 923 <dd>
 924 <pre><code>$( ".selector" ).datepicker({ duration: 'slow' });</code></pre>
 925 </dd>
 926
 927
 928 <dt>
 929   Get or set the <code>duration</code> option, after init.
 930 </dt>
 931 <dd>
 932 <pre><code>//getter
 933 var duration = $( ".selector" ).datepicker( "option", "duration" );
 934 //setter
 935 $( ".selector" ).datepicker( "option", "duration", 'slow' );</code></pre>
 936 </dd>
 937
 938     </dl>
 939   </div>
 940 </li>
 941
 942
 943 <li class="option" id="option-firstDay">
 944   <div class="option-header">
 945     <h3 class="option-name"><a href="#option-firstDay">firstDay</a></h3>
 946     <dl>
 947       <dt class="option-type-label">Type:</dt>
 948         <dd class="option-type">Number</dd>
 949
 950       <dt class="option-default-label">Default:</dt>
 951         <dd class="option-default">0</dd>
 952
 953     </dl>
 954   </div>
 955   <div class="option-description">
 956     <p>Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.</p>
 957   </div>
 958   <div class="option-examples">
 959     <h4>Code examples</h4>
 960     <dl class="option-examples-list">
 961
 962 <dt>
 963   Initialize a datepicker with the <code>firstDay</code> option specified.
 964 </dt>
 965 <dd>
 966 <pre><code>$( ".selector" ).datepicker({ firstDay: 1 });</code></pre>
 967 </dd>
 968
 969
 970 <dt>
 971   Get or set the <code>firstDay</code> option, after init.
 972 </dt>
 973 <dd>
 974 <pre><code>//getter
 975 var firstDay = $( ".selector" ).datepicker( "option", "firstDay" );
 976 //setter
 977 $( ".selector" ).datepicker( "option", "firstDay", 1 );</code></pre>
 978 </dd>
 979
 980     </dl>
 981   </div>
 982 </li>
 983
 984
 985 <li class="option" id="option-gotoCurrent">
 986   <div class="option-header">
 987     <h3 class="option-name"><a href="#option-gotoCurrent">gotoCurrent</a></h3>
 988     <dl>
 989       <dt class="option-type-label">Type:</dt>
 990         <dd class="option-type">Boolean</dd>
 991
 992       <dt class="option-default-label">Default:</dt>
 993         <dd class="option-default">false</dd>
 994
 995     </dl>
 996   </div>
 997   <div class="option-description">
 998     <p>When true the current day link moves to the currently selected date instead of today.</p>
 999   </div>
1000   <div class="option-examples">
1001     <h4>Code examples</h4>
1002     <dl class="option-examples-list">
1003
1004 <dt>
1005   Initialize a datepicker with the <code>gotoCurrent</code> option specified.
1006 </dt>
1007 <dd>
1008 <pre><code>$( ".selector" ).datepicker({ gotoCurrent: true });</code></pre>
1009 </dd>
1010
1011
1012 <dt>
1013   Get or set the <code>gotoCurrent</code> option, after init.
1014 </dt>
1015 <dd>
1016 <pre><code>//getter
1017 var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" );
1018 //setter
1019 $( ".selector" ).datepicker( "option", "gotoCurrent", true );</code></pre>
1020 </dd>
1021
1022     </dl>
1023   </div>
1024 </li>
1025
1026
1027 <li class="option" id="option-hideIfNoPrevNext">
1028   <div class="option-header">
1029     <h3 class="option-name"><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></h3>
1030     <dl>
1031       <dt class="option-type-label">Type:</dt>
1032         <dd class="option-type">Boolean</dd>
1033
1034       <dt class="option-default-label">Default:</dt>
1035         <dd class="option-default">false</dd>
1036
1037     </dl>
1038   </div>
1039   <div class="option-description">
1040     <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>
1041   </div>
1042   <div class="option-examples">
1043     <h4>Code examples</h4>
1044     <dl class="option-examples-list">
1045
1046 <dt>
1047   Initialize a datepicker with the <code>hideIfNoPrevNext</code> option specified.
1048 </dt>
1049 <dd>
1050 <pre><code>$( ".selector" ).datepicker({ hideIfNoPrevNext: true });</code></pre>
1051 </dd>
1052
1053
1054 <dt>
1055   Get or set the <code>hideIfNoPrevNext</code> option, after init.
1056 </dt>
1057 <dd>
1058 <pre><code>//getter
1059 var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );
1060 //setter
1061 $( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );</code></pre>
1062 </dd>
1063
1064     </dl>
1065   </div>
1066 </li>
1067
1068
1069 <li class="option" id="option-isRTL">
1070   <div class="option-header">
1071     <h3 class="option-name"><a href="#option-isRTL">isRTL</a></h3>
1072     <dl>
1073       <dt class="option-type-label">Type:</dt>
1074         <dd class="option-type">Boolean</dd>
1075
1076       <dt class="option-default-label">Default:</dt>
1077         <dd class="option-default">false</dd>
1078
1079     </dl>
1080   </div>
1081   <div class="option-description">
1082     <p>True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes.</p>
1083   </div>
1084   <div class="option-examples">
1085     <h4>Code examples</h4>
1086     <dl class="option-examples-list">
1087
1088 <dt>
1089   Initialize a datepicker with the <code>isRTL</code> option specified.
1090 </dt>
1091 <dd>
1092 <pre><code>$( ".selector" ).datepicker({ isRTL: true });</code></pre>
1093 </dd>
1094
1095
1096 <dt>
1097   Get or set the <code>isRTL</code> option, after init.
1098 </dt>
1099 <dd>
1100 <pre><code>//getter
1101 var isRTL = $( ".selector" ).datepicker( "option", "isRTL" );
1102 //setter
1103 $( ".selector" ).datepicker( "option", "isRTL", true );</code></pre>
1104 </dd>
1105
1106     </dl>
1107   </div>
1108 </li>
1109
1110
1111 <li class="option" id="option-maxDate">
1112   <div class="option-header">
1113     <h3 class="option-name"><a href="#option-maxDate">maxDate</a></h3>
1114     <dl>
1115       <dt class="option-type-label">Type:</dt>
1116         <dd class="option-type">Date, Number, String</dd>
1117
1118       <dt class="option-default-label">Default:</dt>
1119         <dd class="option-default">null</dd>
1120
1121     </dl>
1122   </div>
1123   <div class="option-description">
1124     <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>
1125   </div>
1126   <div class="option-examples">
1127     <h4>Code examples</h4>
1128     <dl class="option-examples-list">
1129
1130 <dt>
1131   Initialize a datepicker with the <code>maxDate</code> option specified.
1132 </dt>
1133 <dd>
1134 <pre><code>$( ".selector" ).datepicker({ maxDate: '+1m +1w' });</code></pre>
1135 </dd>
1136
1137
1138 <dt>
1139   Get or set the <code>maxDate</code> option, after init.
1140 </dt>
1141 <dd>
1142 <pre><code>//getter
1143 var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
1144 //setter
1145 $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );</code></pre>
1146 </dd>
1147
1148     </dl>
1149   </div>
1150 </li>
1151
1152
1153 <li class="option" id="option-minDate">
1154   <div class="option-header">
1155     <h3 class="option-name"><a href="#option-minDate">minDate</a></h3>
1156     <dl>
1157       <dt class="option-type-label">Type:</dt>
1158         <dd class="option-type">Date, Number, String</dd>
1159
1160       <dt class="option-default-label">Default:</dt>
1161         <dd class="option-default">null</dd>
1162
1163     </dl>
1164   </div>
1165   <div class="option-description">
1166     <p>Set a minimum 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. '-1y -1m'), or null for no limit.</p>
1167   </div>
1168   <div class="option-examples">
1169     <h4>Code examples</h4>
1170     <dl class="option-examples-list">
1171
1172 <dt>
1173   Initialize a datepicker with the <code>minDate</code> option specified.
1174 </dt>
1175 <dd>
1176 <pre><code>$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });</code></pre>
1177 </dd>
1178
1179
1180 <dt>
1181   Get or set the <code>minDate</code> option, after init.
1182 </dt>
1183 <dd>
1184 <pre><code>//getter
1185 var minDate = $( ".selector" ).datepicker( "option", "minDate" );
1186 //setter
1187 $( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );</code></pre>
1188 </dd>
1189
1190     </dl>
1191   </div>
1192 </li>
1193
1194
1195 <li class="option" id="option-monthNames">
1196   <div class="option-header">
1197     <h3 class="option-name"><a href="#option-monthNames">monthNames</a></h3>
1198     <dl>
1199       <dt class="option-type-label">Type:</dt>
1200         <dd class="option-type">Array</dd>
1201
1202       <dt class="option-default-label">Default:</dt>
1203         <dd class="option-default">['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']</dd>
1204
1205     </dl>
1206   </div>
1207   <div class="option-description">
1208     <p>The list of full month names, 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>
1209   </div>
1210   <div class="option-examples">
1211     <h4>Code examples</h4>
1212     <dl class="option-examples-list">
1213
1214 <dt>
1215   Initialize a datepicker with the <code>monthNames</code> option specified.
1216 </dt>
1217 <dd>
1218 <pre><code>$( ".selector" ).datepicker({ monthNames: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] });</code></pre>
1219 </dd>
1220
1221
1222 <dt>
1223   Get or set the <code>monthNames</code> option, after init.
1224 </dt>
1225 <dd>
1226 <pre><code>//getter
1227 var monthNames = $( ".selector" ).datepicker( "option", "monthNames" );
1228 //setter
1229 $( ".selector" ).datepicker( "option", "monthNames", ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] );</code></pre>
1230 </dd>
1231
1232     </dl>
1233   </div>
1234 </li>
1235
1236
1237 <li class="option" id="option-monthNamesShort">
1238   <div class="option-header">
1239     <h3 class="option-name"><a href="#option-monthNamesShort">monthNamesShort</a></h3>
1240     <dl>
1241       <dt class="option-type-label">Type:</dt>
1242         <dd class="option-type">Array</dd>
1243
1244       <dt class="option-default-label">Default:</dt>
1245         <dd class="option-default">['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</dd>
1246
1247     </dl>
1248   </div>
1249   <div class="option-description">
1250     <p>The list of abbreviated month names, as used in the month header on each datepicker and 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>
1251   </div>
1252   <div class="option-examples">
1253     <h4>Code examples</h4>
1254     <dl class="option-examples-list">
1255
1256 <dt>
1257   Initialize a datepicker with the <code>monthNamesShort</code> option specified.
1258 </dt>
1259 <dd>
1260 <pre><code>$( ".selector" ).datepicker({ monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] });</code></pre>
1261 </dd>
1262
1263
1264 <dt>
1265   Get or set the <code>monthNamesShort</code> option, after init.
1266 </dt>
1267 <dd>
1268 <pre><code>//getter
1269 var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" );
1270 //setter
1271 $( ".selector" ).datepicker( "option", "monthNamesShort", ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] );</code></pre>
1272 </dd>
1273
1274     </dl>
1275   </div>
1276 </li>
1277
1278
1279 <li class="option" id="option-navigationAsDateFormat">
1280   <div class="option-header">
1281     <h3 class="option-name"><a href="#option-navigationAsDateFormat">navigationAsDateFormat</a></h3>
1282     <dl>
1283       <dt class="option-type-label">Type:</dt>
1284         <dd class="option-type">Boolean</dd>
1285
1286       <dt class="option-default-label">Default:</dt>
1287         <dd class="option-default">false</dd>
1288
1289     </dl>
1290   </div>
1291   <div class="option-description">
1292     <p>When true the <code><a href="http://docs.jquery.com/UI/Datepicker/formatDate" title="UI/Datepicker/formatDate">formatDate</a></code> function is applied to the <code><a href="http://docs.jquery.com/UI/Datepicker#option-prevText" title="UI/Datepicker">prevText</a></code>, <code><a href="http://docs.jquery.com/UI/Datepicker#option-nextText" title="UI/Datepicker">nextText</a></code>, and <code><a href="http://docs.jquery.com/UI/Datepicker#option-currentText" title="UI/Datepicker">currentText</a></code> values before display, allowing them to display the target month names for example.</p>
1293   </div>
1294   <div class="option-examples">
1295     <h4>Code examples</h4>
1296     <dl class="option-examples-list">
1297
1298 <dt>
1299   Initialize a datepicker with the <code>navigationAsDateFormat</code> option specified.
1300 </dt>
1301 <dd>
1302 <pre><code>$( ".selector" ).datepicker({ navigationAsDateFormat: true });</code></pre>
1303 </dd>
1304
1305
1306 <dt>
1307   Get or set the <code>navigationAsDateFormat</code> option, after init.
1308 </dt>
1309 <dd>
1310 <pre><code>//getter
1311 var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" );
1312 //setter
1313 $( ".selector" ).datepicker( "option", "navigationAsDateFormat", true );</code></pre>
1314 </dd>
1315
1316     </dl>
1317   </div>
1318 </li>
1319
1320
1321 <li class="option" id="option-nextText">
1322   <div class="option-header">
1323     <h3 class="option-name"><a href="#option-nextText">nextText</a></h3>
1324     <dl>
1325       <dt class="option-type-label">Type:</dt>
1326         <dd class="option-type">String</dd>
1327
1328       <dt class="option-default-label">Default:</dt>
1329         <dd class="option-default">'Next'</dd>
1330
1331     </dl>
1332   </div>
1333   <div class="option-description">
1334     <p>The text to display for the next month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.</p>
1335   </div>
1336   <div class="option-examples">
1337     <h4>Code examples</h4>
1338     <dl class="option-examples-list">
1339
1340 <dt>
1341   Initialize a datepicker with the <code>nextText</code> option specified.
1342 </dt>
1343 <dd>
1344 <pre><code>$( ".selector" ).datepicker({ nextText: 'Later' });</code></pre>
1345 </dd>
1346
1347
1348 <dt>
1349   Get or set the <code>nextText</code> option, after init.
1350 </dt>
1351 <dd>
1352 <pre><code>//getter
1353 var nextText = $( ".selector" ).datepicker( "option", "nextText" );
1354 //setter
1355 $( ".selector" ).datepicker( "option", "nextText", 'Later' );</code></pre>
1356 </dd>
1357
1358     </dl>
1359   </div>
1360 </li>
1361
1362
1363 <li class="option" id="option-numberOfMonths">
1364   <div class="option-header">
1365     <h3 class="option-name"><a href="#option-numberOfMonths">numberOfMonths</a></h3>
1366     <dl>
1367       <dt class="option-type-label">Type:</dt>
1368         <dd class="option-type">Number, Array</dd>
1369
1370       <dt class="option-default-label">Default:</dt>
1371         <dd class="option-default">1</dd>
1372
1373     </dl>
1374   </div>
1375   <div class="option-description">
1376     <p>Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.</p>
1377   </div>
1378   <div class="option-examples">
1379     <h4>Code examples</h4>
1380     <dl class="option-examples-list">
1381
1382 <dt>
1383   Initialize a datepicker with the <code>numberOfMonths</code> option specified.
1384 </dt>
1385 <dd>
1386 <pre><code>$( ".selector" ).datepicker({ numberOfMonths: [2, 3] });</code></pre>
1387 </dd>
1388
1389
1390 <dt>
1391   Get or set the <code>numberOfMonths</code> option, after init.
1392 </dt>
1393 <dd>
1394 <pre><code>//getter
1395 var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" );
1396 //setter
1397 $( ".selector" ).datepicker( "option", "numberOfMonths", [2, 3] );</code></pre>
1398 </dd>
1399
1400     </dl>
1401   </div>
1402 </li>
1403
1404
1405 <li class="option" id="option-prevText">
1406   <div class="option-header">
1407     <h3 class="option-name"><a href="#option-prevText">prevText</a></h3>
1408     <dl>
1409       <dt class="option-type-label">Type:</dt>
1410         <dd class="option-type">String</dd>
1411
1412       <dt class="option-default-label">Default:</dt>
1413         <dd class="option-default">'Prev'</dd>
1414
1415     </dl>
1416   </div>
1417   <div class="option-description">
1418     <p>The text to display for the previous month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.</p>
1419   </div>
1420   <div class="option-examples">
1421     <h4>Code examples</h4>
1422     <dl class="option-examples-list">
1423
1424 <dt>
1425   Initialize a datepicker with the <code>prevText</code> option specified.
1426 </dt>
1427 <dd>
1428 <pre><code>$( ".selector" ).datepicker({ prevText: 'Earlier' });</code></pre>
1429 </dd>
1430
1431
1432 <dt>
1433   Get or set the <code>prevText</code> option, after init.
1434 </dt>
1435 <dd>
1436 <pre><code>//getter
1437 var prevText = $( ".selector" ).datepicker( "option", "prevText" );
1438 //setter
1439 $( ".selector" ).datepicker( "option", "prevText", 'Earlier' );</code></pre>
1440 </dd>
1441
1442     </dl>
1443   </div>
1444 </li>
1445
1446
1447 <li class="option" id="option-selectOtherMonths">
1448   <div class="option-header">
1449     <h3 class="option-name"><a href="#option-selectOtherMonths">selectOtherMonths</a></h3>
1450     <dl>
1451       <dt class="option-type-label">Type:</dt>
1452         <dd class="option-type">Boolean</dd>
1453
1454       <dt class="option-default-label">Default:</dt>
1455         <dd class="option-default">false</dd>
1456
1457     </dl>
1458   </div>
1459   <div class="option-description">
1460     <p>When true days in other months shown before or after the current month are selectable. This only applies if <code><a href="http://docs.jquery.com/UI/Datepicker#option-showOtherMonths" title="UI/Datepicker">showOtherMonths</a></code> is also true.</p>
1461   </div>
1462   <div class="option-examples">
1463     <h4>Code examples</h4>
1464     <dl class="option-examples-list">
1465
1466 <dt>
1467   Initialize a datepicker with the <code>selectOtherMonths</code> option specified.
1468 </dt>
1469 <dd>
1470 <pre><code>$( ".selector" ).datepicker({ selectOtherMonths: true });</code></pre>
1471 </dd>
1472
1473
1474 <dt>
1475   Get or set the <code>selectOtherMonths</code> option, after init.
1476 </dt>
1477 <dd>
1478 <pre><code>//getter
1479 var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" );
1480 //setter
1481 $( ".selector" ).datepicker( "option", "selectOtherMonths", true );</code></pre>
1482 </dd>
1483
1484     </dl>
1485   </div>
1486 </li>
1487
1488
1489 <li class="option" id="option-shortYearCutoff">
1490   <div class="option-header">
1491     <h3 class="option-name"><a href="#option-shortYearCutoff">shortYearCutoff</a></h3>
1492     <dl>
1493       <dt class="option-type-label">Type:</dt>
1494         <dd class="option-type">String, Number</dd>
1495
1496       <dt class="option-default-label">Default:</dt>
1497         <dd class="option-default">'+10'</dd>
1498
1499     </dl>
1500   </div>
1501   <div class="option-description">
1502     <p>Set the cutoff year for determining the century for a date (used in conjunction with <code><a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">dateFormat</a></code> 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.</p>
1503   </div>
1504   <div class="option-examples">
1505     <h4>Code examples</h4>
1506     <dl class="option-examples-list">
1507
1508 <dt>
1509   Initialize a datepicker with the <code>shortYearCutoff</code> option specified.
1510 </dt>
1511 <dd>
1512 <pre><code>$( ".selector" ).datepicker({ shortYearCutoff: 50 });</code></pre>
1513 </dd>
1514
1515
1516 <dt>
1517   Get or set the <code>shortYearCutoff</code> option, after init.
1518 </dt>
1519 <dd>
1520 <pre><code>//getter
1521 var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" );
1522 //setter
1523 $( ".selector" ).datepicker( "option", "shortYearCutoff", 50 );</code></pre>
1524 </dd>
1525
1526     </dl>
1527   </div>
1528 </li>
1529
1530
1531 <li class="option" id="option-showAnim">
1532   <div class="option-header">
1533     <h3 class="option-name"><a href="#option-showAnim">showAnim</a></h3>
1534     <dl>
1535       <dt class="option-type-label">Type:</dt>
1536         <dd class="option-type">String</dd>
1537
1538       <dt class="option-default-label">Default:</dt>
1539         <dd class="option-default">'show'</dd>
1540
1541     </dl>
1542   </div>
1543   <div class="option-description">
1544     <p>Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', any of the show/hide <a href="http://docs.jquery.com/UI/Effects" class="external text" title="http://docs.jquery.com/UI/Effects">jQuery UI effects</a>, or '' for no animation.</p>
1545   </div>
1546   <div class="option-examples">
1547     <h4>Code examples</h4>
1548     <dl class="option-examples-list">
1549
1550 <dt>
1551   Initialize a datepicker with the <code>showAnim</code> option specified.
1552 </dt>
1553 <dd>
1554 <pre><code>$( ".selector" ).datepicker({ showAnim: 'fold' });</code></pre>
1555 </dd>
1556
1557
1558 <dt>
1559   Get or set the <code>showAnim</code> option, after init.
1560 </dt>
1561 <dd>
1562 <pre><code>//getter
1563 var showAnim = $( ".selector" ).datepicker( "option", "showAnim" );
1564 //setter
1565 $( ".selector" ).datepicker( "option", "showAnim", 'fold' );</code></pre>
1566 </dd>
1567
1568     </dl>
1569   </div>
1570 </li>
1571
1572
1573 <li class="option" id="option-showButtonPanel">
1574   <div class="option-header">
1575     <h3 class="option-name"><a href="#option-showButtonPanel">showButtonPanel</a></h3>
1576     <dl>
1577       <dt class="option-type-label">Type:</dt>
1578         <dd class="option-type">Boolean</dd>
1579
1580       <dt class="option-default-label">Default:</dt>
1581         <dd class="option-default">false</dd>
1582
1583     </dl>
1584   </div>
1585   <div class="option-description">
1586     <p>Whether to show the button panel.</p>
1587   </div>
1588   <div class="option-examples">
1589     <h4>Code examples</h4>
1590     <dl class="option-examples-list">
1591
1592 <dt>
1593   Initialize a datepicker with the <code>showButtonPanel</code> option specified.
1594 </dt>
1595 <dd>
1596 <pre><code>$( ".selector" ).datepicker({ showButtonPanel: true });</code></pre>
1597 </dd>
1598
1599
1600 <dt>
1601   Get or set the <code>showButtonPanel</code> option, after init.
1602 </dt>
1603 <dd>
1604 <pre><code>//getter
1605 var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" );
1606 //setter
1607 $( ".selector" ).datepicker( "option", "showButtonPanel", true );</code></pre>
1608 </dd>
1609
1610     </dl>
1611   </div>
1612 </li>
1613
1614
1615 <li class="option" id="option-showCurrentAtPos">
1616   <div class="option-header">
1617     <h3 class="option-name"><a href="#option-showCurrentAtPos">showCurrentAtPos</a></h3>
1618     <dl>
1619       <dt class="option-type-label">Type:</dt>
1620         <dd class="option-type">Number</dd>
1621
1622       <dt class="option-default-label">Default:</dt>
1623         <dd class="option-default">0</dd>
1624
1625     </dl>
1626   </div>
1627   <div class="option-description">
1628     <p>Specify where in a <a href="http://docs.jquery.com/UI/Datepicker#option-numberOfMonths" title="UI/Datepicker">multi-month</a> display the current month shows, starting from 0 at the top/left.</p>
1629   </div>
1630   <div class="option-examples">
1631     <h4>Code examples</h4>
1632     <dl class="option-examples-list">
1633
1634 <dt>
1635   Initialize a datepicker with the <code>showCurrentAtPos</code> option specified.
1636 </dt>
1637 <dd>
1638 <pre><code>$( ".selector" ).datepicker({ showCurrentAtPos: 3 });</code></pre>
1639 </dd>
1640
1641
1642 <dt>
1643   Get or set the <code>showCurrentAtPos</code> option, after init.
1644 </dt>
1645 <dd>
1646 <pre><code>//getter
1647 var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" );
1648 //setter
1649 $( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 );</code></pre>
1650 </dd>
1651
1652     </dl>
1653   </div>
1654 </li>
1655
1656
1657 <li class="option" id="option-showMonthAfterYear">
1658   <div class="option-header">
1659     <h3 class="option-name"><a href="#option-showMonthAfterYear">showMonthAfterYear</a></h3>
1660     <dl>
1661       <dt class="option-type-label">Type:</dt>
1662         <dd class="option-type">Boolean</dd>
1663
1664       <dt class="option-default-label">Default:</dt>
1665         <dd class="option-default">false</dd>
1666
1667     </dl>
1668   </div>
1669   <div class="option-description">
1670     <p>Whether to show the month after the year in the header. This attribute is one of the regionalisation attributes.</p>
1671   </div>
1672   <div class="option-examples">
1673     <h4>Code examples</h4>
1674     <dl class="option-examples-list">
1675
1676 <dt>
1677   Initialize a datepicker with the <code>showMonthAfterYear</code> option specified.
1678 </dt>
1679 <dd>
1680 <pre><code>$( ".selector" ).datepicker({ showMonthAfterYear: true });</code></pre>
1681 </dd>
1682
1683
1684 <dt>
1685   Get or set the <code>showMonthAfterYear</code> option, after init.
1686 </dt>
1687 <dd>
1688 <pre><code>//getter
1689 var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" );
1690 //setter
1691 $( ".selector" ).datepicker( "option", "showMonthAfterYear", true );</code></pre>
1692 </dd>
1693
1694     </dl>
1695   </div>
1696 </li>
1697
1698
1699 <li class="option" id="option-showOn">
1700   <div class="option-header">
1701     <h3 class="option-name"><a href="#option-showOn">showOn</a></h3>
1702     <dl>
1703       <dt class="option-type-label">Type:</dt>
1704         <dd class="option-type">String</dd>
1705
1706       <dt class="option-default-label">Default:</dt>
1707         <dd class="option-default">'focus'</dd>
1708
1709     </dl>
1710   </div>
1711   <div class="option-description">
1712     <p>Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').</p>
1713   </div>
1714   <div class="option-examples">
1715     <h4>Code examples</h4>
1716     <dl class="option-examples-list">
1717
1718 <dt>
1719   Initialize a datepicker with the <code>showOn</code> option specified.
1720 </dt>
1721 <dd>
1722 <pre><code>$( ".selector" ).datepicker({ showOn: 'both' });</code></pre>
1723 </dd>
1724
1725
1726 <dt>
1727   Get or set the <code>showOn</code> option, after init.
1728 </dt>
1729 <dd>
1730 <pre><code>//getter
1731 var showOn = $( ".selector" ).datepicker( "option", "showOn" );
1732 //setter
1733 $( ".selector" ).datepicker( "option", "showOn", 'both' );</code></pre>
1734 </dd>
1735
1736     </dl>
1737   </div>
1738 </li>
1739
1740
1741 <li class="option" id="option-showOptions">
1742   <div class="option-header">
1743     <h3 class="option-name"><a href="#option-showOptions">showOptions</a></h3>
1744     <dl>
1745       <dt class="option-type-label">Type:</dt>
1746         <dd class="option-type">Options</dd>
1747
1748       <dt class="option-default-label">Default:</dt>
1749         <dd class="option-default">{}</dd>
1750
1751     </dl>
1752   </div>
1753   <div class="option-description">
1754     <p>If using one of the jQuery UI effects for <code><a href="http://docs.jquery.com/UI/Datepicker#option-showAnim" title="UI/Datepicker">showAnim</a></code>, you can provide additional settings for that animation via this option.</p>
1755   </div>
1756   <div class="option-examples">
1757     <h4>Code examples</h4>
1758     <dl class="option-examples-list">
1759
1760 <dt>
1761   Initialize a datepicker with the <code>showOptions</code> option specified.
1762 </dt>
1763 <dd>
1764 <pre><code>$( ".selector" ).datepicker({ showOptions: {direction: 'up' });</code></pre>
1765 </dd>
1766
1767
1768 <dt>
1769   Get or set the <code>showOptions</code> option, after init.
1770 </dt>
1771 <dd>
1772 <pre><code>//getter
1773 var showOptions = $( ".selector" ).datepicker( "option", "showOptions" );
1774 //setter
1775 $( ".selector" ).datepicker( "option", "showOptions", {direction: 'up' );</code></pre>
1776 </dd>
1777
1778     </dl>
1779   </div>
1780 </li>
1781
1782
1783 <li class="option" id="option-showOtherMonths">
1784   <div class="option-header">
1785     <h3 class="option-name"><a href="#option-showOtherMonths">showOtherMonths</a></h3>
1786     <dl>
1787       <dt class="option-type-label">Type:</dt>
1788         <dd class="option-type">Boolean</dd>
1789
1790       <dt class="option-default-label">Default:</dt>
1791         <dd class="option-default">false</dd>
1792
1793     </dl>
1794   </div>
1795   <div class="option-description">
1796     <p>Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use <code><a href="http://docs.jquery.com/UI/Datepicker#option-selectOtherMonths" title="UI/Datepicker">selectOtherMonths</a></code>.</p>
1797   </div>
1798   <div class="option-examples">
1799     <h4>Code examples</h4>
1800     <dl class="option-examples-list">
1801
1802 <dt>
1803   Initialize a datepicker with the <code>showOtherMonths</code> option specified.
1804 </dt>
1805 <dd>
1806 <pre><code>$( ".selector" ).datepicker({ showOtherMonths: true });</code></pre>
1807 </dd>
1808
1809
1810 <dt>
1811   Get or set the <code>showOtherMonths</code> option, after init.
1812 </dt>
1813 <dd>
1814 <pre><code>//getter
1815 var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" );
1816 //setter
1817 $( ".selector" ).datepicker( "option", "showOtherMonths", true );</code></pre>
1818 </dd>
1819
1820     </dl>
1821   </div>
1822 </li>
1823
1824
1825 <li class="option" id="option-showWeek">
1826   <div class="option-header">
1827     <h3 class="option-name"><a href="#option-showWeek">showWeek</a></h3>
1828     <dl>
1829       <dt class="option-type-label">Type:</dt>
1830         <dd class="option-type">Boolean</dd>
1831
1832       <dt class="option-default-label">Default:</dt>
1833         <dd class="option-default">false</dd>
1834
1835     </dl>
1836   </div>
1837   <div class="option-description">
1838     <p>When true a column is added to show the week of the year. The <code><a href="http://docs.jquery.com/UI/Datepicker#option-calculateWeek" title="UI/Datepicker">calculateWeek</a></code> option determines how the week of the year is calculated. You may also want to change the <code><a href="http://docs.jquery.com/UI/Datepicker#option-firstDay" title="UI/Datepicker">firstDay</a></code> option.</p>
1839   </div>
1840   <div class="option-examples">
1841     <h4>Code examples</h4>
1842     <dl class="option-examples-list">
1843
1844 <dt>
1845   Initialize a datepicker with the <code>showWeek</code> option specified.
1846 </dt>
1847 <dd>
1848 <pre><code>$( ".selector" ).datepicker({ showWeek: true });</code></pre>
1849 </dd>
1850
1851
1852 <dt>
1853   Get or set the <code>showWeek</code> option, after init.
1854 </dt>
1855 <dd>
1856 <pre><code>//getter
1857 var showWeek = $( ".selector" ).datepicker( "option", "showWeek" );
1858 //setter
1859 $( ".selector" ).datepicker( "option", "showWeek", true );</code></pre>
1860 </dd>
1861
1862     </dl>
1863   </div>
1864 </li>
1865
1866
1867 <li class="option" id="option-stepMonths">
1868   <div class="option-header">
1869     <h3 class="option-name"><a href="#option-stepMonths">stepMonths</a></h3>
1870     <dl>
1871       <dt class="option-type-label">Type:</dt>
1872         <dd class="option-type">Number</dd>
1873
1874       <dt class="option-default-label">Default:</dt>
1875         <dd class="option-default">1</dd>
1876
1877     </dl>
1878   </div>
1879   <div class="option-description">
1880     <p>Set how many months to move when clicking the Previous/Next links.</p>
1881   </div>
1882   <div class="option-examples">
1883     <h4>Code examples</h4>
1884     <dl class="option-examples-list">
1885
1886 <dt>
1887   Initialize a datepicker with the <code>stepMonths</code> option specified.
1888 </dt>
1889 <dd>
1890 <pre><code>$( ".selector" ).datepicker({ stepMonths: 3 });</code></pre>
1891 </dd>
1892
1893
1894 <dt>
1895   Get or set the <code>stepMonths</code> option, after init.
1896 </dt>
1897 <dd>
1898 <pre><code>//getter
1899 var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" );
1900 //setter
1901 $( ".selector" ).datepicker( "option", "stepMonths", 3 );</code></pre>
1902 </dd>
1903
1904     </dl>
1905   </div>
1906 </li>
1907
1908
1909 <li class="option" id="option-weekHeader">
1910   <div class="option-header">
1911     <h3 class="option-name"><a href="#option-weekHeader">weekHeader</a></h3>
1912     <dl>
1913       <dt class="option-type-label">Type:</dt>
1914         <dd class="option-type">String</dd>
1915
1916       <dt class="option-default-label">Default:</dt>
1917         <dd class="option-default">'Wk'</dd>
1918
1919     </dl>
1920   </div>
1921   <div class="option-description">
1922     <p>The text to display for the week of the year column heading. This attribute is one of the regionalisation attributes. Use <code><a href="http://docs.jquery.com/UI/Datepicker#option-showWeek" title="UI/Datepicker">showWeek</a></code> to display this column.</p>
1923   </div>
1924   <div class="option-examples">
1925     <h4>Code examples</h4>
1926     <dl class="option-examples-list">
1927
1928 <dt>
1929   Initialize a datepicker with the <code>weekHeader</code> option specified.
1930 </dt>
1931 <dd>
1932 <pre><code>$( ".selector" ).datepicker({ weekHeader: 'W' });</code></pre>
1933 </dd>
1934
1935
1936 <dt>
1937   Get or set the <code>weekHeader</code> option, after init.
1938 </dt>
1939 <dd>
1940 <pre><code>//getter
1941 var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" );
1942 //setter
1943 $( ".selector" ).datepicker( "option", "weekHeader", 'W' );</code></pre>
1944 </dd>
1945
1946     </dl>
1947   </div>
1948 </li>
1949
1950
1951 <li class="option" id="option-yearRange">
1952   <div class="option-header">
1953     <h3 class="option-name"><a href="#option-yearRange">yearRange</a></h3>
1954     <dl>
1955       <dt class="option-type-label">Type:</dt>
1956         <dd class="option-type">String</dd>
1957
1958       <dt class="option-default-label">Default:</dt>
1959         <dd class="option-default">'c-10:c+10'</dd>
1960
1961     </dl>
1962   </div>
1963   <div class="option-description">
1964     <p>Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the <code><a href="http://docs.jquery.com/UI/Datepicker#option-minDate" title="UI/Datepicker">minDate</a></code> and/or <code><a href="http://docs.jquery.com/UI/Datepicker#option-maxDate" title="UI/Datepicker">maxDate</a></code> options.</p>
1965   </div>
1966   <div class="option-examples">
1967     <h4>Code examples</h4>
1968     <dl class="option-examples-list">
1969
1970 <dt>
1971   Initialize a datepicker with the <code>yearRange</code> option specified.
1972 </dt>
1973 <dd>
1974 <pre><code>$( ".selector" ).datepicker({ yearRange: '2000:2010' });</code></pre>
1975 </dd>
1976
1977
1978 <dt>
1979   Get or set the <code>yearRange</code> option, after init.
1980 </dt>
1981 <dd>
1982 <pre><code>//getter
1983 var yearRange = $( ".selector" ).datepicker( "option", "yearRange" );
1984 //setter
1985 $( ".selector" ).datepicker( "option", "yearRange", '2000:2010' );</code></pre>
1986 </dd>
1987
1988     </dl>
1989   </div>
1990 </li>
1991
1992
1993 <li class="option" id="option-yearSuffix">
1994   <div class="option-header">
1995     <h3 class="option-name"><a href="#option-yearSuffix">yearSuffix</a></h3>
1996     <dl>
1997       <dt class="option-type-label">Type:</dt>
1998         <dd class="option-type">String</dd>
1999
2000       <dt class="option-default-label">Default:</dt>
2001         <dd class="option-default">''</dd>
2002
2003     </dl>
2004   </div>
2005   <div class="option-description">
2006     <p>Additional text to display after the year in the month headers. This attribute is one of the regionalisation attributes.</p>
2007   </div>
2008   <div class="option-examples">
2009     <h4>Code examples</h4>
2010     <dl class="option-examples-list">
2011
2012 <dt>
2013   Initialize a datepicker with the <code>yearSuffix</code> option specified.
2014 </dt>
2015 <dd>
2016 <pre><code>$( ".selector" ).datepicker({ yearSuffix: 'CE' });</code></pre>
2017 </dd>
2018
2019
2020 <dt>
2021   Get or set the <code>yearSuffix</code> option, after init.
2022 </dt>
2023 <dd>
2024 <pre><code>//getter
2025 var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" );
2026 //setter
2027 $( ".selector" ).datepicker( "option", "yearSuffix", 'CE' );</code></pre>
2028 </dd>
2029
2030     </dl>
2031   </div>
2032 </li>
2033
2034     </ul>
2035   </div>
2036   <div id="events">
2037     <h2 class="top-header">Events</h2>
2038     <ul class="events-list">
2039
2040 <li class="event" id="event-beforeShow">
2041   <div class="event-header">
2042     <h3 class="event-name"><a href="#event-beforeShow">beforeShow</a></h3>
2043     <dl>
2044       <dt class="event-type-label"></dt>
2045         <dd class="event-type">function(input, inst)</dd>
2046     </dl>
2047   </div>
2048   <div class="event-description">
2049     <p>Can be 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.</p>
2050   </div>
2051   <div class="event-examples">
2052     <h4>Code examples</h4>
2053     <dl class="event-examples-list">
2054
2055 <dt>
2056   Supply a callback function to handle the <code>beforeShow</code> event as an init option.
2057 </dt>
2058 <dd>
2059 <pre><code>$('.selector').datepicker({
2060    beforeShow: function(input, inst) { ... }
2061 });</code></pre>
2062 </dd>
2063
2064     </dl>
2065   </div>
2066 </li>
2067
2068
2069 <li class="event" id="event-beforeShowDay">
2070   <div class="event-header">
2071     <h3 class="event-name"><a href="#event-beforeShowDay">beforeShowDay</a></h3>
2072     <dl>
2073       <dt class="event-type-label"></dt>
2074         <dd class="event-type">function(date)</dd>
2075     </dl>
2076   </div>
2077   <div class="event-description">
2078     <p>The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.</p>
2079   </div>
2080   <div class="event-examples">
2081     <h4>Code examples</h4>
2082     <dl class="event-examples-list">
2083
2084 <dt>
2085   Supply a callback function to handle the <code>beforeShowDay</code> event as an init option.
2086 </dt>
2087 <dd>
2088 <pre><code>$('.selector').datepicker({
2089    beforeShowDay: function(date) { ... }
2090 });</code></pre>
2091 </dd>
2092
2093     </dl>
2094   </div>
2095 </li>
2096
2097
2098 <li class="event" id="event-onChangeMonthYear">
2099   <div class="event-header">
2100     <h3 class="event-name"><a href="#event-onChangeMonthYear">onChangeMonthYear</a></h3>
2101     <dl>
2102       <dt class="event-type-label"></dt>
2103         <dd class="event-type">function(year, month, inst)</dd>
2104     </dl>
2105   </div>
2106   <div class="event-description">
2107     <p>Allows you to define your own event when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>
2108   </div>
2109   <div class="event-examples">
2110     <h4>Code examples</h4>
2111     <dl class="event-examples-list">
2112
2113 <dt>
2114   Supply a callback function to handle the <code>onChangeMonthYear</code> event as an init option.
2115 </dt>
2116 <dd>
2117 <pre><code>$('.selector').datepicker({
2118    onChangeMonthYear: function(year, month, inst) { ... }
2119 });</code></pre>
2120 </dd>
2121
2122     </dl>
2123   </div>
2124 </li>
2125
2126
2127 <li class="event" id="event-onClose">
2128   <div class="event-header">
2129     <h3 class="event-name"><a href="#event-onClose">onClose</a></h3>
2130     <dl>
2131       <dt class="event-type-label"></dt>
2132         <dd class="event-type">function(dateText, inst)</dd>
2133     </dl>
2134   </div>
2135   <div class="event-description">
2136     <p>Allows you to define your own event when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ('' if none) and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>
2137   </div>
2138   <div class="event-examples">
2139     <h4>Code examples</h4>
2140     <dl class="event-examples-list">
2141
2142 <dt>
2143   Supply a callback function to handle the <code>onClose</code> event as an init option.
2144 </dt>
2145 <dd>
2146 <pre><code>$('.selector').datepicker({
2147    onClose: function(dateText, inst) { ... }
2148 });</code></pre>
2149 </dd>
2150
2151     </dl>
2152   </div>
2153 </li>
2154
2155
2156 <li class="event" id="event-onSelect">
2157   <div class="event-header">
2158     <h3 class="event-name"><a href="#event-onSelect">onSelect</a></h3>
2159     <dl>
2160       <dt class="event-type-label"></dt>
2161         <dd class="event-type">function(dateText, inst)</dd>
2162     </dl>
2163   </div>
2164   <div class="event-description">
2165     <p>Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</p>
2166   </div>
2167   <div class="event-examples">
2168     <h4>Code examples</h4>
2169     <dl class="event-examples-list">
2170
2171 <dt>
2172   Supply a callback function to handle the <code>onSelect</code> event as an init option.
2173 </dt>
2174 <dd>
2175 <pre><code>$('.selector').datepicker({
2176    onSelect: function(dateText, inst) { ... }
2177 });</code></pre>
2178 </dd>
2179
2180     </dl>
2181   </div>
2182 </li>
2183
2184     </ul>
2185   </div>
2186   <div id="methods">
2187     <h2 class="top-header">Methods</h2>
2188     <ul class="methods-list">
2189
2190 <li class="method" id="method-destroy">
2191   <div class="method-header">
2192     <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
2193     <dl>
2194       <dt class="method-signature-label">Signature:</dt>
2195         <dd class="method-signature">.datepicker( "destroy"
2196
2197
2198
2199
2200
2201
2202
2203 )</dd>
2204     </dl>
2205   </div>
2206   <div class="method-description">
2207     <p>Remove the datepicker functionality completely. This will return the element back to its pre-init state.</p>
2208   </div>
2209 </li>
2210
2211
2212 <li class="method" id="method-disable">
2213   <div class="method-header">
2214     <h3 class="method-name"><a href="#method-disable">disable</a></h3>
2215     <dl>
2216       <dt class="method-signature-label">Signature:</dt>
2217         <dd class="method-signature">.datepicker( "disable"
2218
2219
2220
2221
2222
2223
2224
2225 )</dd>
2226     </dl>
2227   </div>
2228   <div class="method-description">
2229     <p>Disable the datepicker.</p>
2230   </div>
2231 </li>
2232
2233
2234 <li class="method" id="method-enable">
2235   <div class="method-header">
2236     <h3 class="method-name"><a href="#method-enable">enable</a></h3>
2237     <dl>
2238       <dt class="method-signature-label">Signature:</dt>
2239         <dd class="method-signature">.datepicker( "enable"
2240
2241
2242
2243
2244
2245
2246
2247 )</dd>
2248     </dl>
2249   </div>
2250   <div class="method-description">
2251     <p>Enable the datepicker.</p>
2252   </div>
2253 </li>
2254
2255
2256 <li class="method" id="method-option">
2257   <div class="method-header">
2258     <h3 class="method-name"><a href="#method-option">option</a></h3>
2259     <dl>
2260       <dt class="method-signature-label">Signature:</dt>
2261         <dd class="method-signature">.datepicker( "option"
2262
2263 , optionName
2264
2265 , <span class="optional">[</span>value<span class="optional">] </span>
2266
2267
2268
2269 )</dd>
2270     </dl>
2271   </div>
2272   <div class="method-description">
2273     <p>Get or set any datepicker option. If no value is specified, will act as a getter.</p>
2274   </div>
2275 </li>
2276
2277
2278 <li class="method" id="method-option">
2279   <div class="method-header">
2280     <h3 class="method-name"><a href="#method-option">option</a></h3>
2281     <dl>
2282       <dt class="method-signature-label">Signature:</dt>
2283         <dd class="method-signature">.datepicker( "option"
2284
2285 , options
2286
2287
2288
2289
2290
2291 )</dd>
2292     </dl>
2293   </div>
2294   <div class="method-description">
2295     <p>Set multiple datepicker options at once by providing an options object.</p>
2296   </div>
2297 </li>
2298
2299
2300 <li class="method" id="method-widget">
2301   <div class="method-header">
2302     <h3 class="method-name"><a href="#method-widget">widget</a></h3>
2303     <dl>
2304       <dt class="method-signature-label">Signature:</dt>
2305         <dd class="method-signature">.datepicker( "widget"
2306
2307
2308
2309
2310
2311
2312
2313 )</dd>
2314     </dl>
2315   </div>
2316   <div class="method-description">
2317     <p>Returns the .ui-datepicker element.</p>
2318   </div>
2319 </li>
2320
2321
2322 <li class="method" id="method-dialog">
2323   <div class="method-header">
2324     <h3 class="method-name"><a href="#method-dialog">dialog</a></h3>
2325     <dl>
2326       <dt class="method-signature-label">Signature:</dt>
2327         <dd class="method-signature">.datepicker( "dialog"
2328
2329 , date
2330
2331 , <span class="optional">[</span>onSelect<span class="optional">] </span>
2332
2333 , <span class="optional">[</span>settings<span class="optional">] </span>
2334
2335 , <span class="optional">[</span>pos<span class="optional">] </span>)</dd>
2336     </dl>
2337   </div>
2338   <div class="method-description">
2339     <p>Open a datepicker in a "dialog" box.
2340 </p><p>dateText: the initial date for the date picker as either a Date or a string in the current date format.
2341 </p><p>onSelect: A callback function when a date is selected. The function receives the date text and date picker instance as parameters.
2342 </p><p>settings: The new settings for the date picker.
2343 </p><p>pos: The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.</p>
2344   </div>
2345 </li>
2346
2347
2348 <li class="method" id="method-isDisabled">
2349   <div class="method-header">
2350     <h3 class="method-name"><a href="#method-isDisabled">isDisabled</a></h3>
2351     <dl>
2352       <dt class="method-signature-label">Signature:</dt>
2353         <dd class="method-signature">.datepicker( "isDisabled"
2354
2355
2356
2357
2358
2359
2360
2361 )</dd>
2362     </dl>
2363   </div>
2364   <div class="method-description">
2365     <p>Determine whether a date picker has been disabled.</p>
2366   </div>
2367 </li>
2368
2369
2370 <li class="method" id="method-hide">
2371   <div class="method-header">
2372     <h3 class="method-name"><a href="#method-hide">hide</a></h3>
2373     <dl>
2374       <dt class="method-signature-label">Signature:</dt>
2375         <dd class="method-signature">.datepicker( "hide"
2376
2377
2378
2379
2380
2381
2382
2383 )</dd>
2384     </dl>
2385   </div>
2386   <div class="method-description">
2387     <p>Close a previously opened date picker.</p>
2388   </div>
2389 </li>
2390
2391
2392 <li class="method" id="method-show">
2393   <div class="method-header">
2394     <h3 class="method-name"><a href="#method-show">show</a></h3>
2395     <dl>
2396       <dt class="method-signature-label">Signature:</dt>
2397         <dd class="method-signature">.datepicker( "show"
2398
2399
2400
2401
2402
2403
2404
2405 )</dd>
2406     </dl>
2407   </div>
2408   <div class="method-description">
2409     <p>Call up a previously attached date picker.</p>
2410   </div>
2411 </li>
2412
2413
2414 <li class="method" id="method-refresh">
2415   <div class="method-header">
2416     <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
2417     <dl>
2418       <dt class="method-signature-label">Signature:</dt>
2419         <dd class="method-signature">.datepicker( "refresh"
2420
2421
2422
2423
2424
2425
2426
2427 )</dd>
2428     </dl>
2429   </div>
2430   <div class="method-description">
2431     <p>Redraw a date picker, after having made some external modifications.</p>
2432   </div>
2433 </li>
2434
2435
2436 <li class="method" id="method-getDate">
2437   <div class="method-header">
2438     <h3 class="method-name"><a href="#method-getDate">getDate</a></h3>
2439     <dl>
2440       <dt class="method-signature-label">Signature:</dt>
2441         <dd class="method-signature">.datepicker( "getDate"
2442
2443
2444
2445
2446
2447
2448
2449 )</dd>
2450     </dl>
2451   </div>
2452   <div class="method-description">
2453     <p>Returns the current date for the datepicker or null if no date has been selected.</p>
2454   </div>
2455 </li>
2456
2457
2458 <li class="method" id="method-setDate">
2459   <div class="method-header">
2460     <h3 class="method-name"><a href="#method-setDate">setDate</a></h3>
2461     <dl>
2462       <dt class="method-signature-label">Signature:</dt>
2463         <dd class="method-signature">.datepicker( "setDate"
2464
2465 , date
2466
2467
2468
2469
2470
2471 )</dd>
2472     </dl>
2473   </div>
2474   <div class="method-description">
2475     <p>Sets the current date for the datepicker. The new date may be a Date object or a string in the current <a href="http://docs.jquery.com/UI/Datepicker#option-dateFormat" title="UI/Datepicker">date format</a> (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.</p>
2476   </div>
2477 </li>
2478
2479     </ul>
2480   </div>
2481   <div id="theming">
2482     <h2 class="top-header">Theming</h2>
2483     <p>The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
2484 </p>
2485   <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.datepicker.css stylesheet that can be modified. These classes are highlighed in bold below.
2486 </p>
2487
2488   <h3>Sample markup with jQuery UI CSS Framework classes</h3>
2489   &lt;div id=&quot;ui-datepicker-div&quot; class=&quot;<strong>ui-datepicker</strong> ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible&quot;&gt;<br />
2490 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-header</strong> ui-widget-header ui-helper-clearfix ui-corner-all&quot;&gt;<br />
2491 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-datepicker-prev</strong> ui-corner-all&quot;&gt;title=&quot;Prev&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-w&quot;&gt;Prev&lt;/span&gt;&lt;/a&gt;<br />
2492 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-datepicker-next</strong> ui-corner-all&quot; title=&quot;Next&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-circle-triangle-e&quot;&gt;Next&lt;/span&gt;&lt;/a&gt;<br />
2493 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-title</strong>&quot;&gt;<br />
2494 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;<strong>ui-datepicker-month</strong>&quot;&gt;January&lt;/span&gt;&lt;span class=&quot;<strong>ui-datepicker-year</strong>&quot;&gt;2009&lt;/span&gt;<br />
2495 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
2496 &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
2497 &nbsp;&nbsp;&nbsp;&lt;table class=&quot;<strong>ui-datepicker-calendar</strong>&quot;&gt;<br />
2498 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;<br />
2499 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br />
2500 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th class=&quot;<strong>ui-datepicker-week-end</strong>&quot;&gt;&lt;span title=&quot;Sunday&quot;&gt;Su&lt;/span&gt;&lt;/th&gt;<br />
2501 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br />
2502 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br />
2503 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt;<br />
2504 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;&lt;tr&gt;<br />
2505 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class=&quot;<strong>ui-datepicker-week-end ui-datepicker-other-month</strong> &quot;&gt;&nbsp;1&nbsp;&lt;/td&gt;<br />
2506 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br />
2507 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br />
2508 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tbody&gt;<br />
2509 &nbsp;&nbsp;&nbsp;&lt;/table&gt;<br />
2510 &nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-datepicker-buttonpane</strong> ui-widget-content&quot;&gt;<br />
2511 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;<strong>ui-datepicker-current</strong> ui-state-default ui-priority-secondary ui-corner-all&quot;&gt;Today&lt;/button&gt;<br />
2512 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;<strong>ui-datepicker-close</strong> ui-state-default ui-priority-primary ui-corner-all&quot;&gt;Done&lt;/button&gt;<br />
2513 &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
2514 &lt;/div&gt;<br />
2515   <p class="theme-note">
2516     <strong>
2517       Note: This is a sample of markup generated by the datepicker plugin, not markup you should use to create a datepicker. The only markup needed for that is &lt;input type="text" /&gt; or &lt;div&gt;&lt;/div&gt;.
2518     </strong>
2519   </p>
2520
2521   </div>
2522 </div>
2523
2524 </p><!--
2525 Pre-expand include size: 97232 bytes
2526 Post-expand include size: 193237 bytes
2527 Template argument size: 120737 bytes
2528 Maximum: 2097152 bytes
2529 -->
2530
2531 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3774-1!1!0!!en!2 and timestamp 20100805033350 -->