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