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