| [ Index ] |
PHP Cross Reference of Drupal 6 (gatewave) |
[Summary view] [Print] [Text view]
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>$("#datepicker").datepicker(); 50 </pre> 51 <p></div><div id="source" class="tabs-container"> 52 </p> 53 <pre><!DOCTYPE html> 54 <html> 55 <head> 56 <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 57 <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 58 <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 59 <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script> 60 <script type="text/javascript"> 61 $(document).ready(function(){ 62 $("#datepicker").datepicker(); 63 }); 64 </script> 65 </head> 66 <body style="font-size:62.5%;"> 67 68 <div type="text" id="datepicker"></div> 69 70 </body> 71 </html> 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 <div id="ui-datepicker-div" class="<strong>ui-datepicker</strong> ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><br /> 2109 <div class="<strong>ui-datepicker-header</strong> ui-widget-header ui-helper-clearfix ui-corner-all"><br /> 2110 <a class="<strong>ui-datepicker-prev</strong> ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><br /> 2111 <a class="<strong>ui-datepicker-next</strong> ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><br /> 2112 <div class="<strong>ui-datepicker-title</strong>"><br /> 2113 <span class="<strong>ui-datepicker-month</strong>">January</span><span class="<strong>ui-datepicker-year</strong>">2009</span><br /> 2114 </div><br /> 2115 </div><br /> 2116 <table class="<strong>ui-datepicker-calendar</strong>"><br /> 2117 <thead><br /> 2118 <tr><br /> 2119 <th class="<strong>ui-datepicker-week-end</strong>"><span title="Sunday">Su</span></th><br /> 2120 ...<br /> 2121 </tr><br /> 2122 </thead><br /> 2123 <tbody><tr><br /> 2124 <td class="<strong>ui-datepicker-week-end ui-datepicker-other-month</strong> "> 1 </td><br /> 2125 ...<br /> 2126 </tr><br /> 2127 </tbody><br /> 2128 </table><br /> 2129 <div class="<strong>ui-datepicker-buttonpane</strong> ui-widget-content"><br /> 2130 <button type="button" class="<strong>ui-datepicker-current</strong> ui-state-default ui-priority-secondary ui-corner-all">Today</button><br /> 2131 <button type="button" class="<strong>ui-datepicker-close</strong> ui-state-default ui-priority-primary ui-corner-all">Done</button><br /> 2132 </div><br /> 2133 </div><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 <input type="text" /> or <div></div>. 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 -->
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Mar 24 11:18:33 2011 | Cross-referenced by PHPXref 0.7 |