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>
9 <div class="UIAPIPlugin">
10 <h1>jQuery UI Datepicker</h1>
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:
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>
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>
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>
36 <div id="overview-dependencies">
42 <div id="overview-example">
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 />
49 <pre>$("#datepicker").datepicker();
51 <p></div><div id="source" class="tabs-container">
53 <pre><!DOCTYPE html>
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();
66 <body style="font-size:62.5%;">
68 <div type="text" id="datepicker"></div>
78 <h2 class="top-header">Options</h2>
79 <ul class="options-list">
81 <li class="option" id="option-altField">
82 <div class="option-header">
83 <h3 class="option-name"><a href="#option-altField">altField</a></h3>
85 <dt class="option-type-label">Type:</dt>
86 <dd class="option-type">String</dd>
88 <dt class="option-default-label">Default:</dt>
89 <dd class="option-default">''</dd>
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>
96 <div class="option-examples">
97 <h4>Code examples</h4>
98 <dl class="option-examples-list">
101 Initialize a datepicker with the <code>altField</code> option specified.
104 <pre><code>$('.selector').datepicker({ altField: '#actualDate' });</code></pre>
109 Get or set the <code>altField</code> option, after init.
113 var altField = $('.selector').datepicker('option', 'altField');
115 $('.selector').datepicker('option', 'altField', '#actualDate');</code></pre>
123 <li class="option" id="option-altFormat">
124 <div class="option-header">
125 <h3 class="option-name"><a href="#option-altFormat">altFormat</a></h3>
127 <dt class="option-type-label">Type:</dt>
128 <dd class="option-type">String</dd>
130 <dt class="option-default-label">Default:</dt>
131 <dd class="option-default">''</dd>
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>
138 <div class="option-examples">
139 <h4>Code examples</h4>
140 <dl class="option-examples-list">
143 Initialize a datepicker with the <code>altFormat</code> option specified.
146 <pre><code>$('.selector').datepicker({ altFormat: 'yy-mm-dd' });</code></pre>
151 Get or set the <code>altFormat</code> option, after init.
155 var altFormat = $('.selector').datepicker('option', 'altFormat');
157 $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');</code></pre>
165 <li class="option" id="option-appendText">
166 <div class="option-header">
167 <h3 class="option-name"><a href="#option-appendText">appendText</a></h3>
169 <dt class="option-type-label">Type:</dt>
170 <dd class="option-type">String</dd>
172 <dt class="option-default-label">Default:</dt>
173 <dd class="option-default">''</dd>
177 <div class="option-description">
178 <p>The text to display after each date field, e.g. to show the required format.</p>
180 <div class="option-examples">
181 <h4>Code examples</h4>
182 <dl class="option-examples-list">
185 Initialize a datepicker with the <code>appendText</code> option specified.
188 <pre><code>$('.selector').datepicker({ appendText: '(yyyy-mm-dd)' });</code></pre>
193 Get or set the <code>appendText</code> option, after init.
197 var appendText = $('.selector').datepicker('option', 'appendText');
199 $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');</code></pre>
207 <li class="option" id="option-buttonImage">
208 <div class="option-header">
209 <h3 class="option-name"><a href="#option-buttonImage">buttonImage</a></h3>
211 <dt class="option-type-label">Type:</dt>
212 <dd class="option-type">String</dd>
214 <dt class="option-default-label">Default:</dt>
215 <dd class="option-default">''</dd>
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>
222 <div class="option-examples">
223 <h4>Code examples</h4>
224 <dl class="option-examples-list">
227 Initialize a datepicker with the <code>buttonImage</code> option specified.
230 <pre><code>$('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });</code></pre>
235 Get or set the <code>buttonImage</code> option, after init.
239 var buttonImage = $('.selector').datepicker('option', 'buttonImage');
241 $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');</code></pre>
249 <li class="option" id="option-buttonImageOnly">
250 <div class="option-header">
251 <h3 class="option-name"><a href="#option-buttonImageOnly">buttonImageOnly</a></h3>
253 <dt class="option-type-label">Type:</dt>
254 <dd class="option-type">Boolean</dd>
256 <dt class="option-default-label">Default:</dt>
257 <dd class="option-default">false</dd>
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>
264 <div class="option-examples">
265 <h4>Code examples</h4>
266 <dl class="option-examples-list">
269 Initialize a datepicker with the <code>buttonImageOnly</code> option specified.
272 <pre><code>$('.selector').datepicker({ buttonImageOnly: true });</code></pre>
277 Get or set the <code>buttonImageOnly</code> option, after init.
281 var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
283 $('.selector').datepicker('option', 'buttonImageOnly', true);</code></pre>
291 <li class="option" id="option-buttonText">
292 <div class="option-header">
293 <h3 class="option-name"><a href="#option-buttonText">buttonText</a></h3>
295 <dt class="option-type-label">Type:</dt>
296 <dd class="option-type">String</dd>
298 <dt class="option-default-label">Default:</dt>
299 <dd class="option-default">'...'</dd>
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>
306 <div class="option-examples">
307 <h4>Code examples</h4>
308 <dl class="option-examples-list">
311 Initialize a datepicker with the <code>buttonText</code> option specified.
314 <pre><code>$('.selector').datepicker({ buttonText: 'Choose' });</code></pre>
319 Get or set the <code>buttonText</code> option, after init.
323 var buttonText = $('.selector').datepicker('option', 'buttonText');
325 $('.selector').datepicker('option', 'buttonText', 'Choose');</code></pre>
333 <li class="option" id="option-changeMonth">
334 <div class="option-header">
335 <h3 class="option-name"><a href="#option-changeMonth">changeMonth</a></h3>
337 <dt class="option-type-label">Type:</dt>
338 <dd class="option-type">Boolean</dd>
340 <dt class="option-default-label">Default:</dt>
341 <dd class="option-default">false</dd>
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>
348 <div class="option-examples">
349 <h4>Code examples</h4>
350 <dl class="option-examples-list">
353 Initialize a datepicker with the <code>changeMonth</code> option specified.
356 <pre><code>$('.selector').datepicker({ changeMonth: true });</code></pre>
361 Get or set the <code>changeMonth</code> option, after init.
365 var changeMonth = $('.selector').datepicker('option', 'changeMonth');
367 $('.selector').datepicker('option', 'changeMonth', true);</code></pre>
375 <li class="option" id="option-changeYear">
376 <div class="option-header">
377 <h3 class="option-name"><a href="#option-changeYear">changeYear</a></h3>
379 <dt class="option-type-label">Type:</dt>
380 <dd class="option-type">Boolean</dd>
382 <dt class="option-default-label">Default:</dt>
383 <dd class="option-default">false</dd>
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>
390 <div class="option-examples">
391 <h4>Code examples</h4>
392 <dl class="option-examples-list">
395 Initialize a datepicker with the <code>changeYear</code> option specified.
398 <pre><code>$('.selector').datepicker({ changeYear: true });</code></pre>
403 Get or set the <code>changeYear</code> option, after init.
407 var changeYear = $('.selector').datepicker('option', 'changeYear');
409 $('.selector').datepicker('option', 'changeYear', true);</code></pre>
417 <li class="option" id="option-closeText">
418 <div class="option-header">
419 <h3 class="option-name"><a href="#option-closeText">closeText</a></h3>
421 <dt class="option-type-label">Type:</dt>
422 <dd class="option-type">String</dd>
424 <dt class="option-default-label">Default:</dt>
425 <dd class="option-default">'Done'</dd>
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>
432 <div class="option-examples">
433 <h4>Code examples</h4>
434 <dl class="option-examples-list">
437 Initialize a datepicker with the <code>closeText</code> option specified.
440 <pre><code>$('.selector').datepicker({ closeText: 'X' });</code></pre>
445 Get or set the <code>closeText</code> option, after init.
449 var closeText = $('.selector').datepicker('option', 'closeText');
451 $('.selector').datepicker('option', 'closeText', 'X');</code></pre>
459 <li class="option" id="option-constrainInput">
460 <div class="option-header">
461 <h3 class="option-name"><a href="#option-constrainInput">constrainInput</a></h3>
463 <dt class="option-type-label">Type:</dt>
464 <dd class="option-type">Boolean</dd>
466 <dt class="option-default-label">Default:</dt>
467 <dd class="option-default">true</dd>
471 <div class="option-description">
472 <p>True if the input field is constrained to the current date format.</p>
474 <div class="option-examples">
475 <h4>Code examples</h4>
476 <dl class="option-examples-list">
479 Initialize a datepicker with the <code>constrainInput</code> option specified.
482 <pre><code>$('.selector').datepicker({ constrainInput: false });</code></pre>
487 Get or set the <code>constrainInput</code> option, after init.
491 var constrainInput = $('.selector').datepicker('option', 'constrainInput');
493 $('.selector').datepicker('option', 'constrainInput', false);</code></pre>
501 <li class="option" id="option-currentText">
502 <div class="option-header">
503 <h3 class="option-name"><a href="#option-currentText">currentText</a></h3>
505 <dt class="option-type-label">Type:</dt>
506 <dd class="option-type">String</dd>
508 <dt class="option-default-label">Default:</dt>
509 <dd class="option-default">'Today'</dd>
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>
516 <div class="option-examples">
517 <h4>Code examples</h4>
518 <dl class="option-examples-list">
521 Initialize a datepicker with the <code>currentText</code> option specified.
524 <pre><code>$('.selector').datepicker({ currentText: 'Now' });</code></pre>
529 Get or set the <code>currentText</code> option, after init.
533 var currentText = $('.selector').datepicker('option', 'currentText');
535 $('.selector').datepicker('option', 'currentText', 'Now');</code></pre>
543 <li class="option" id="option-dateFormat">
544 <div class="option-header">
545 <h3 class="option-name"><a href="#option-dateFormat">dateFormat</a></h3>
547 <dt class="option-type-label">Type:</dt>
548 <dd class="option-type">String</dd>
550 <dt class="option-default-label">Default:</dt>
551 <dd class="option-default">'mm/dd/yy'</dd>
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>
558 <div class="option-examples">
559 <h4>Code examples</h4>
560 <dl class="option-examples-list">
563 Initialize a datepicker with the <code>dateFormat</code> option specified.
566 <pre><code>$('.selector').datepicker({ dateFormat: 'yy-mm-dd' });</code></pre>
571 Get or set the <code>dateFormat</code> option, after init.
575 var dateFormat = $('.selector').datepicker('option', 'dateFormat');
577 $('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');</code></pre>
585 <li class="option" id="option-dayNames">
586 <div class="option-header">
587 <h3 class="option-name"><a href="#option-dayNames">dayNames</a></h3>
589 <dt class="option-type-label">Type:</dt>
590 <dd class="option-type">Array</dd>
592 <dt class="option-default-label">Default:</dt>
593 <dd class="option-default">['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</dd>
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>
600 <div class="option-examples">
601 <h4>Code examples</h4>
602 <dl class="option-examples-list">
605 Initialize a datepicker with the <code>dayNames</code> option specified.
608 <pre><code>$('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });</code></pre>
613 Get or set the <code>dayNames</code> option, after init.
617 var dayNames = $('.selector').datepicker('option', 'dayNames');
619 $('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']);</code></pre>
627 <li class="option" id="option-dayNamesMin">
628 <div class="option-header">
629 <h3 class="option-name"><a href="#option-dayNamesMin">dayNamesMin</a></h3>
631 <dt class="option-type-label">Type:</dt>
632 <dd class="option-type">Array</dd>
634 <dt class="option-default-label">Default:</dt>
635 <dd class="option-default">['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</dd>
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>
642 <div class="option-examples">
643 <h4>Code examples</h4>
644 <dl class="option-examples-list">
647 Initialize a datepicker with the <code>dayNamesMin</code> option specified.
650 <pre><code>$('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });</code></pre>
655 Get or set the <code>dayNamesMin</code> option, after init.
659 var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');
661 $('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']);</code></pre>
669 <li class="option" id="option-dayNamesShort">
670 <div class="option-header">
671 <h3 class="option-name"><a href="#option-dayNamesShort">dayNamesShort</a></h3>
673 <dt class="option-type-label">Type:</dt>
674 <dd class="option-type">Array</dd>
676 <dt class="option-default-label">Default:</dt>
677 <dd class="option-default">['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</dd>
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>
684 <div class="option-examples">
685 <h4>Code examples</h4>
686 <dl class="option-examples-list">
689 Initialize a datepicker with the <code>dayNamesShort</code> option specified.
692 <pre><code>$('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });</code></pre>
697 Get or set the <code>dayNamesShort</code> option, after init.
701 var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort');
703 $('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']);</code></pre>
711 <li class="option" id="option-defaultDate">
712 <div class="option-header">
713 <h3 class="option-name"><a href="#option-defaultDate">defaultDate</a></h3>
715 <dt class="option-type-label">Type:</dt>
716 <dd class="option-type">Date, Number, String</dd>
718 <dt class="option-default-label">Default:</dt>
719 <dd class="option-default">null</dd>
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>
726 <div class="option-examples">
727 <h4>Code examples</h4>
728 <dl class="option-examples-list">
731 Initialize a datepicker with the <code>defaultDate</code> option specified.
734 <pre><code>$('.selector').datepicker({ defaultDate: +7 });</code></pre>
739 Get or set the <code>defaultDate</code> option, after init.
743 var defaultDate = $('.selector').datepicker('option', 'defaultDate');
745 $('.selector').datepicker('option', 'defaultDate', +7);</code></pre>
753 <li class="option" id="option-duration">
754 <div class="option-header">
755 <h3 class="option-name"><a href="#option-duration">duration</a></h3>
757 <dt class="option-type-label">Type:</dt>
758 <dd class="option-type">String, Number</dd>
760 <dt class="option-default-label">Default:</dt>
761 <dd class="option-default">'normal'</dd>
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>
768 <div class="option-examples">
769 <h4>Code examples</h4>
770 <dl class="option-examples-list">
773 Initialize a datepicker with the <code>duration</code> option specified.
776 <pre><code>$('.selector').datepicker({ duration: 'slow' });</code></pre>
781 Get or set the <code>duration</code> option, after init.
785 var duration = $('.selector').datepicker('option', 'duration');
787 $('.selector').datepicker('option', 'duration', 'slow');</code></pre>
795 <li class="option" id="option-firstDay">
796 <div class="option-header">
797 <h3 class="option-name"><a href="#option-firstDay">firstDay</a></h3>
799 <dt class="option-type-label">Type:</dt>
800 <dd class="option-type">Number</dd>
802 <dt class="option-default-label">Default:</dt>
803 <dd class="option-default">0</dd>
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>
810 <div class="option-examples">
811 <h4>Code examples</h4>
812 <dl class="option-examples-list">
815 Initialize a datepicker with the <code>firstDay</code> option specified.
818 <pre><code>$('.selector').datepicker({ firstDay: 1 });</code></pre>
823 Get or set the <code>firstDay</code> option, after init.
827 var firstDay = $('.selector').datepicker('option', 'firstDay');
829 $('.selector').datepicker('option', 'firstDay', 1);</code></pre>
837 <li class="option" id="option-gotoCurrent">
838 <div class="option-header">
839 <h3 class="option-name"><a href="#option-gotoCurrent">gotoCurrent</a></h3>
841 <dt class="option-type-label">Type:</dt>
842 <dd class="option-type">Boolean</dd>
844 <dt class="option-default-label">Default:</dt>
845 <dd class="option-default">false</dd>
849 <div class="option-description">
850 <p>If true, the current day link moves to the currently selected date instead of today.</p>
852 <div class="option-examples">
853 <h4>Code examples</h4>
854 <dl class="option-examples-list">
857 Initialize a datepicker with the <code>gotoCurrent</code> option specified.
860 <pre><code>$('.selector').datepicker({ gotoCurrent: true });</code></pre>
865 Get or set the <code>gotoCurrent</code> option, after init.
869 var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');
871 $('.selector').datepicker('option', 'gotoCurrent', true);</code></pre>
879 <li class="option" id="option-hideIfNoPrevNext">
880 <div class="option-header">
881 <h3 class="option-name"><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></h3>
883 <dt class="option-type-label">Type:</dt>
884 <dd class="option-type">Boolean</dd>
886 <dt class="option-default-label">Default:</dt>
887 <dd class="option-default">false</dd>
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>
894 <div class="option-examples">
895 <h4>Code examples</h4>
896 <dl class="option-examples-list">
899 Initialize a datepicker with the <code>hideIfNoPrevNext</code> option specified.
902 <pre><code>$('.selector').datepicker({ hideIfNoPrevNext: true });</code></pre>
907 Get or set the <code>hideIfNoPrevNext</code> option, after init.
911 var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
913 $('.selector').datepicker('option', 'hideIfNoPrevNext', true);</code></pre>
921 <li class="option" id="option-isRTL">
922 <div class="option-header">
923 <h3 class="option-name"><a href="#option-isRTL">isRTL</a></h3>
925 <dt class="option-type-label">Type:</dt>
926 <dd class="option-type">Boolean</dd>
928 <dt class="option-default-label">Default:</dt>
929 <dd class="option-default">false</dd>
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>
936 <div class="option-examples">
937 <h4>Code examples</h4>
938 <dl class="option-examples-list">
941 Initialize a datepicker with the <code>isRTL</code> option specified.
944 <pre><code>$('.selector').datepicker({ isRTL: true });</code></pre>
949 Get or set the <code>isRTL</code> option, after init.
953 var isRTL = $('.selector').datepicker('option', 'isRTL');
955 $('.selector').datepicker('option', 'isRTL', true);</code></pre>
963 <li class="option" id="option-maxDate">
964 <div class="option-header">
965 <h3 class="option-name"><a href="#option-maxDate">maxDate</a></h3>
967 <dt class="option-type-label">Type:</dt>
968 <dd class="option-type">Date, Number, String</dd>
970 <dt class="option-default-label">Default:</dt>
971 <dd class="option-default">null</dd>
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>
978 <div class="option-examples">
979 <h4>Code examples</h4>
980 <dl class="option-examples-list">
983 Initialize a datepicker with the <code>maxDate</code> option specified.
986 <pre><code>$('.selector').datepicker({ maxDate: '+1m +1w' });</code></pre>
991 Get or set the <code>maxDate</code> option, after init.
995 var maxDate = $('.selector').datepicker('option', 'maxDate');
997 $('.selector').datepicker('option', 'maxDate', '+1m +1w');</code></pre>
1005 <li class="option" id="option-minDate">
1006 <div class="option-header">
1007 <h3 class="option-name"><a href="#option-minDate">minDate</a></h3>
1009 <dt class="option-type-label">Type:</dt>
1010 <dd class="option-type">Date, Number, String</dd>
1012 <dt class="option-default-label">Default:</dt>
1013 <dd class="option-default">null</dd>
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>
1020 <div class="option-examples">
1021 <h4>Code examples</h4>
1022 <dl class="option-examples-list">
1025 Initialize a datepicker with the <code>minDate</code> option specified.
1028 <pre><code>$('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });</code></pre>
1033 Get or set the <code>minDate</code> option, after init.
1037 var minDate = $('.selector').datepicker('option', 'minDate');
1039 $('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));</code></pre>
1047 <li class="option" id="option-monthNames">
1048 <div class="option-header">
1049 <h3 class="option-name"><a href="#option-monthNames">monthNames</a></h3>
1051 <dt class="option-type-label">Type:</dt>
1052 <dd class="option-type">Array</dd>
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>
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>
1062 <div class="option-examples">
1063 <h4>Code examples</h4>
1064 <dl class="option-examples-list">
1067 Initialize a datepicker with the <code>monthNames</code> option specified.
1070 <pre><code>$('.selector').datepicker({ monthNames: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] });</code></pre>
1075 Get or set the <code>monthNames</code> option, after init.
1079 var monthNames = $('.selector').datepicker('option', 'monthNames');
1081 $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']);</code></pre>
1089 <li class="option" id="option-monthNamesShort">
1090 <div class="option-header">
1091 <h3 class="option-name"><a href="#option-monthNamesShort">monthNamesShort</a></h3>
1093 <dt class="option-type-label">Type:</dt>
1094 <dd class="option-type">Array</dd>
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>
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>
1104 <div class="option-examples">
1105 <h4>Code examples</h4>
1106 <dl class="option-examples-list">
1109 Initialize a datepicker with the <code>monthNamesShort</code> option specified.
1112 <pre><code>$('.selector').datepicker({ monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] });</code></pre>
1117 Get or set the <code>monthNamesShort</code> option, after init.
1121 var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
1123 $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']);</code></pre>
1131 <li class="option" id="option-navigationAsDateFormat">
1132 <div class="option-header">
1133 <h3 class="option-name"><a href="#option-navigationAsDateFormat">navigationAsDateFormat</a></h3>
1135 <dt class="option-type-label">Type:</dt>
1136 <dd class="option-type">Boolean</dd>
1138 <dt class="option-default-label">Default:</dt>
1139 <dd class="option-default">false</dd>
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>
1146 <div class="option-examples">
1147 <h4>Code examples</h4>
1148 <dl class="option-examples-list">
1151 Initialize a datepicker with the <code>navigationAsDateFormat</code> option specified.
1154 <pre><code>$('.selector').datepicker({ navigationAsDateFormat: true });</code></pre>
1159 Get or set the <code>navigationAsDateFormat</code> option, after init.
1163 var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
1165 $('.selector').datepicker('option', 'navigationAsDateFormat', true);</code></pre>
1173 <li class="option" id="option-nextText">
1174 <div class="option-header">
1175 <h3 class="option-name"><a href="#option-nextText">nextText</a></h3>
1177 <dt class="option-type-label">Type:</dt>
1178 <dd class="option-type">String</dd>
1180 <dt class="option-default-label">Default:</dt>
1181 <dd class="option-default">'Next'</dd>
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>
1188 <div class="option-examples">
1189 <h4>Code examples</h4>
1190 <dl class="option-examples-list">
1193 Initialize a datepicker with the <code>nextText</code> option specified.
1196 <pre><code>$('.selector').datepicker({ nextText: 'Later' });</code></pre>
1201 Get or set the <code>nextText</code> option, after init.
1205 var nextText = $('.selector').datepicker('option', 'nextText');
1207 $('.selector').datepicker('option', 'nextText', 'Later');</code></pre>
1215 <li class="option" id="option-numberOfMonths">
1216 <div class="option-header">
1217 <h3 class="option-name"><a href="#option-numberOfMonths">numberOfMonths</a></h3>
1219 <dt class="option-type-label">Type:</dt>
1220 <dd class="option-type">Number, Array</dd>
1222 <dt class="option-default-label">Default:</dt>
1223 <dd class="option-default">1</dd>
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>
1230 <div class="option-examples">
1231 <h4>Code examples</h4>
1232 <dl class="option-examples-list">
1235 Initialize a datepicker with the <code>numberOfMonths</code> option specified.
1238 <pre><code>$('.selector').datepicker({ numberOfMonths: [2, 3] });</code></pre>
1243 Get or set the <code>numberOfMonths</code> option, after init.
1247 var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
1249 $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);</code></pre>
1257 <li class="option" id="option-prevText">
1258 <div class="option-header">
1259 <h3 class="option-name"><a href="#option-prevText">prevText</a></h3>
1261 <dt class="option-type-label">Type:</dt>
1262 <dd class="option-type">String</dd>
1264 <dt class="option-default-label">Default:</dt>
1265 <dd class="option-default">'Prev'</dd>
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>
1272 <div class="option-examples">
1273 <h4>Code examples</h4>
1274 <dl class="option-examples-list">
1277 Initialize a datepicker with the <code>prevText</code> option specified.
1280 <pre><code>$('.selector').datepicker({ prevText: 'Earlier' });</code></pre>
1285 Get or set the <code>prevText</code> option, after init.
1289 var prevText = $('.selector').datepicker('option', 'prevText');
1291 $('.selector').datepicker('option', 'prevText', 'Earlier');</code></pre>
1299 <li class="option" id="option-shortYearCutoff">
1300 <div class="option-header">
1301 <h3 class="option-name"><a href="#option-shortYearCutoff">shortYearCutoff</a></h3>
1303 <dt class="option-type-label">Type:</dt>
1304 <dd class="option-type">String, Number</dd>
1306 <dt class="option-default-label">Default:</dt>
1307 <dd class="option-default">'+10'</dd>
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>
1314 <div class="option-examples">
1315 <h4>Code examples</h4>
1316 <dl class="option-examples-list">
1319 Initialize a datepicker with the <code>shortYearCutoff</code> option specified.
1322 <pre><code>$('.selector').datepicker({ shortYearCutoff: 50 });</code></pre>
1327 Get or set the <code>shortYearCutoff</code> option, after init.
1331 var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
1333 $('.selector').datepicker('option', 'shortYearCutoff', 50);</code></pre>
1341 <li class="option" id="option-showAnim">
1342 <div class="option-header">
1343 <h3 class="option-name"><a href="#option-showAnim">showAnim</a></h3>
1345 <dt class="option-type-label">Type:</dt>
1346 <dd class="option-type">String</dd>
1348 <dt class="option-default-label">Default:</dt>
1349 <dd class="option-default">'show'</dd>
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>
1356 <div class="option-examples">
1357 <h4>Code examples</h4>
1358 <dl class="option-examples-list">
1361 Initialize a datepicker with the <code>showAnim</code> option specified.
1364 <pre><code>$('.selector').datepicker({ showAnim: 'fold' });</code></pre>
1369 Get or set the <code>showAnim</code> option, after init.
1373 var showAnim = $('.selector').datepicker('option', 'showAnim');
1375 $('.selector').datepicker('option', 'showAnim', 'fold');</code></pre>
1383 <li class="option" id="option-showButtonPanel">
1384 <div class="option-header">
1385 <h3 class="option-name"><a href="#option-showButtonPanel">showButtonPanel</a></h3>
1387 <dt class="option-type-label">Type:</dt>
1388 <dd class="option-type">Boolean</dd>
1390 <dt class="option-default-label">Default:</dt>
1391 <dd class="option-default">false</dd>
1395 <div class="option-description">
1396 <p>Whether to show the button panel.</p>
1398 <div class="option-examples">
1399 <h4>Code examples</h4>
1400 <dl class="option-examples-list">
1403 Initialize a datepicker with the <code>showButtonPanel</code> option specified.
1406 <pre><code>$('.selector').datepicker({ showButtonPanel: true });</code></pre>
1411 Get or set the <code>showButtonPanel</code> option, after init.
1415 var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
1417 $('.selector').datepicker('option', 'showButtonPanel', true);</code></pre>
1425 <li class="option" id="option-showCurrentAtPos">
1426 <div class="option-header">
1427 <h3 class="option-name"><a href="#option-showCurrentAtPos">showCurrentAtPos</a></h3>
1429 <dt class="option-type-label">Type:</dt>
1430 <dd class="option-type">Number</dd>
1432 <dt class="option-default-label">Default:</dt>
1433 <dd class="option-default">0</dd>
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>
1440 <div class="option-examples">
1441 <h4>Code examples</h4>
1442 <dl class="option-examples-list">
1445 Initialize a datepicker with the <code>showCurrentAtPos</code> option specified.
1448 <pre><code>$('.selector').datepicker({ showCurrentAtPos: 3 });</code></pre>
1453 Get or set the <code>showCurrentAtPos</code> option, after init.
1457 var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
1459 $('.selector').datepicker('option', 'showCurrentAtPos', 3);</code></pre>
1467 <li class="option" id="option-showMonthAfterYear">
1468 <div class="option-header">
1469 <h3 class="option-name"><a href="#option-showMonthAfterYear">showMonthAfterYear</a></h3>
1471 <dt class="option-type-label">Type:</dt>
1472 <dd class="option-type">Boolean</dd>
1474 <dt class="option-default-label">Default:</dt>
1475 <dd class="option-default">false</dd>
1479 <div class="option-description">
1480 <p>Whether to show the month after the year in the header.</p>
1482 <div class="option-examples">
1483 <h4>Code examples</h4>
1484 <dl class="option-examples-list">
1487 Initialize a datepicker with the <code>showMonthAfterYear</code> option specified.
1490 <pre><code>$('.selector').datepicker({ showMonthAfterYear: true });</code></pre>
1495 Get or set the <code>showMonthAfterYear</code> option, after init.
1499 var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
1501 $('.selector').datepicker('option', 'showMonthAfterYear', true);</code></pre>
1509 <li class="option" id="option-showOn">
1510 <div class="option-header">
1511 <h3 class="option-name"><a href="#option-showOn">showOn</a></h3>
1513 <dt class="option-type-label">Type:</dt>
1514 <dd class="option-type">String</dd>
1516 <dt class="option-default-label">Default:</dt>
1517 <dd class="option-default">'focus'</dd>
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>
1524 <div class="option-examples">
1525 <h4>Code examples</h4>
1526 <dl class="option-examples-list">
1529 Initialize a datepicker with the <code>showOn</code> option specified.
1532 <pre><code>$('.selector').datepicker({ showOn: 'both' });</code></pre>
1537 Get or set the <code>showOn</code> option, after init.
1541 var showOn = $('.selector').datepicker('option', 'showOn');
1543 $('.selector').datepicker('option', 'showOn', 'both');</code></pre>
1551 <li class="option" id="option-showOptions">
1552 <div class="option-header">
1553 <h3 class="option-name"><a href="#option-showOptions">showOptions</a></h3>
1555 <dt class="option-type-label">Type:</dt>
1556 <dd class="option-type">Options</dd>
1558 <dt class="option-default-label">Default:</dt>
1559 <dd class="option-default">{}</dd>
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>
1566 <div class="option-examples">
1567 <h4>Code examples</h4>
1568 <dl class="option-examples-list">
1571 Initialize a datepicker with the <code>showOptions</code> option specified.
1574 <pre><code>$('.selector').datepicker({ showOptions: {direction: 'up' });</code></pre>
1579 Get or set the <code>showOptions</code> option, after init.
1583 var showOptions = $('.selector').datepicker('option', 'showOptions');
1585 $('.selector').datepicker('option', 'showOptions', {direction: 'up');</code></pre>
1593 <li class="option" id="option-showOtherMonths">
1594 <div class="option-header">
1595 <h3 class="option-name"><a href="#option-showOtherMonths">showOtherMonths</a></h3>
1597 <dt class="option-type-label">Type:</dt>
1598 <dd class="option-type">Boolean</dd>
1600 <dt class="option-default-label">Default:</dt>
1601 <dd class="option-default">false</dd>
1605 <div class="option-description">
1606 <p>Display dates in other months (non-selectable) at the start or end of the current month.</p>
1608 <div class="option-examples">
1609 <h4>Code examples</h4>
1610 <dl class="option-examples-list">
1613 Initialize a datepicker with the <code>showOtherMonths</code> option specified.
1616 <pre><code>$('.selector').datepicker({ showOtherMonths: true });</code></pre>
1621 Get or set the <code>showOtherMonths</code> option, after init.
1625 var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
1627 $('.selector').datepicker('option', 'showOtherMonths', true);</code></pre>
1635 <li class="option" id="option-stepMonths">
1636 <div class="option-header">
1637 <h3 class="option-name"><a href="#option-stepMonths">stepMonths</a></h3>
1639 <dt class="option-type-label">Type:</dt>
1640 <dd class="option-type">Number</dd>
1642 <dt class="option-default-label">Default:</dt>
1643 <dd class="option-default">1</dd>
1647 <div class="option-description">
1648 <p>Set how many months to move when clicking the Previous/Next links.</p>
1650 <div class="option-examples">
1651 <h4>Code examples</h4>
1652 <dl class="option-examples-list">
1655 Initialize a datepicker with the <code>stepMonths</code> option specified.
1658 <pre><code>$('.selector').datepicker({ stepMonths: 3 });</code></pre>
1663 Get or set the <code>stepMonths</code> option, after init.
1667 var stepMonths = $('.selector').datepicker('option', 'stepMonths');
1669 $('.selector').datepicker('option', 'stepMonths', 3);</code></pre>
1677 <li class="option" id="option-yearRange">
1678 <div class="option-header">
1679 <h3 class="option-name"><a href="#option-yearRange">yearRange</a></h3>
1681 <dt class="option-type-label">Type:</dt>
1682 <dd class="option-type">String</dd>
1684 <dt class="option-default-label">Default:</dt>
1685 <dd class="option-default">'-10:+10'</dd>
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>
1692 <div class="option-examples">
1693 <h4>Code examples</h4>
1694 <dl class="option-examples-list">
1697 Initialize a datepicker with the <code>yearRange</code> option specified.
1700 <pre><code>$('.selector').datepicker({ yearRange: '2000:2010' });</code></pre>
1705 Get or set the <code>yearRange</code> option, after init.
1709 var yearRange = $('.selector').datepicker('option', 'yearRange');
1711 $('.selector').datepicker('option', 'yearRange', '2000:2010');</code></pre>
1721 <h2 class="top-header">Events</h2>
1722 <ul class="events-list">
1724 <li class="event" id="event-beforeShow">
1725 <div class="event-header">
1726 <h3 class="event-name"><a href="#event-beforeShow">beforeShow</a></h3>
1728 <dt class="event-type-label"></dt>
1729 <dd class="event-type">function(input)</dd>
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>
1735 <div class="event-examples">
1736 <h4>Code examples</h4>
1737 <dl class="event-examples-list">
1740 Supply a callback function to handle the <code>beforeShow</code> event as an init option.
1743 <pre><code>$('.selector').datepicker({
1744 beforeShow: function(input) { ... }
1753 <li class="event" id="event-beforeShowDay">
1754 <div class="event-header">
1755 <h3 class="event-name"><a href="#event-beforeShowDay">beforeShowDay</a></h3>
1757 <dt class="event-type-label"></dt>
1758 <dd class="event-type">function(date)</dd>
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>
1764 <div class="event-examples">
1765 <h4>Code examples</h4>
1766 <dl class="event-examples-list">
1769 Supply a callback function to handle the <code>beforeShowDay</code> event as an init option.
1772 <pre><code>$('.selector').datepicker({
1773 beforeShowDay: function(date) { ... }
1782 <li class="event" id="event-onChangeMonthYear">
1783 <div class="event-header">
1784 <h3 class="event-name"><a href="#event-onChangeMonthYear">onChangeMonthYear</a></h3>
1786 <dt class="event-type-label"></dt>
1787 <dd class="event-type">function(year, month, inst)</dd>
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>
1793 <div class="event-examples">
1794 <h4>Code examples</h4>
1795 <dl class="event-examples-list">
1798 Supply a callback function to handle the <code>onChangeMonthYear</code> event as an init option.
1801 <pre><code>$('.selector').datepicker({
1802 onChangeMonthYear: function(year, month, inst) { ... }
1811 <li class="event" id="event-onClose">
1812 <div class="event-header">
1813 <h3 class="event-name"><a href="#event-onClose">onClose</a></h3>
1815 <dt class="event-type-label"></dt>
1816 <dd class="event-type">function(dateText, inst)</dd>
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>
1822 <div class="event-examples">
1823 <h4>Code examples</h4>
1824 <dl class="event-examples-list">
1827 Supply a callback function to handle the <code>onClose</code> event as an init option.
1830 <pre><code>$('.selector').datepicker({
1831 onClose: function(dateText, inst) { ... }
1840 <li class="event" id="event-onSelect">
1841 <div class="event-header">
1842 <h3 class="event-name"><a href="#event-onSelect">onSelect</a></h3>
1844 <dt class="event-type-label"></dt>
1845 <dd class="event-type">function(dateText, inst)</dd>
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>
1851 <div class="event-examples">
1852 <h4>Code examples</h4>
1853 <dl class="event-examples-list">
1856 Supply a callback function to handle the <code>onSelect</code> event as an init option.
1859 <pre><code>$('.selector').datepicker({
1860 onSelect: function(dateText, inst) { ... }
1871 <h2 class="top-header">Methods</h2>
1872 <ul class="methods-list">
1874 <li class="method" id="method-destroy">
1875 <div class="method-header">
1876 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1878 <dt class="method-signature-label">Signature:</dt>
1879 <dd class="method-signature">.datepicker( 'destroy'
1890 <div class="method-description">
1891 <p>Remove the datepicker functionality completely. This will return the element back to its pre-init state.</p>
1896 <li class="method" id="method-disable">
1897 <div class="method-header">
1898 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1900 <dt class="method-signature-label">Signature:</dt>
1901 <dd class="method-signature">.datepicker( 'disable'
1912 <div class="method-description">
1913 <p>Disable the datepicker.</p>
1918 <li class="method" id="method-enable">
1919 <div class="method-header">
1920 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1922 <dt class="method-signature-label">Signature:</dt>
1923 <dd class="method-signature">.datepicker( 'enable'
1934 <div class="method-description">
1935 <p>Enable the datepicker.</p>
1940 <li class="method" id="method-option">
1941 <div class="method-header">
1942 <h3 class="method-name"><a href="#method-option">option</a></h3>
1944 <dt class="method-signature-label">Signature:</dt>
1945 <dd class="method-signature">.datepicker( 'option'
1949 , <span class="optional">[</span>value<span class="optional">] </span>
1956 <div class="method-description">
1957 <p>Get or set any datepicker option. If no value is specified, will act as a getter.</p>
1962 <li class="method" id="method-dialog">
1963 <div class="method-header">
1964 <h3 class="method-name"><a href="#method-dialog">dialog</a></h3>
1966 <dt class="method-signature-label">Signature:</dt>
1967 <dd class="method-signature">.datepicker( 'dialog'
1971 , <span class="optional">[</span>onSelect<span class="optional">] </span>
1973 , <span class="optional">[</span>settings<span class="optional">] </span>
1975 , <span class="optional">[</span>pos<span class="optional">] </span>)</dd>
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>
1988 <li class="method" id="method-isDisabled">
1989 <div class="method-header">
1990 <h3 class="method-name"><a href="#method-isDisabled">isDisabled</a></h3>
1992 <dt class="method-signature-label">Signature:</dt>
1993 <dd class="method-signature">.datepicker( 'isDisabled'
2004 <div class="method-description">
2005 <p>Determine whether a date picker has been disabled.</p>
2010 <li class="method" id="method-hide">
2011 <div class="method-header">
2012 <h3 class="method-name"><a href="#method-hide">hide</a></h3>
2014 <dt class="method-signature-label">Signature:</dt>
2015 <dd class="method-signature">.datepicker( 'hide'
2017 , <span class="optional">[</span>speed<span class="optional">] </span>
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>
2033 <li class="method" id="method-show">
2034 <div class="method-header">
2035 <h3 class="method-name"><a href="#method-show">show</a></h3>
2037 <dt class="method-signature-label">Signature:</dt>
2038 <dd class="method-signature">.datepicker( 'show'
2049 <div class="method-description">
2050 <p>Call up a previously attached date picker.</p>
2055 <li class="method" id="method-getDate">
2056 <div class="method-header">
2057 <h3 class="method-name"><a href="#method-getDate">getDate</a></h3>
2059 <dt class="method-signature-label">Signature:</dt>
2060 <dd class="method-signature">.datepicker( 'getDate'
2071 <div class="method-description">
2072 <p>Returns the current date for the datepicker.</p>
2077 <li class="method" id="method-setDate">
2078 <div class="method-header">
2079 <h3 class="method-name"><a href="#method-setDate">setDate</a></h3>
2081 <dt class="method-signature-label">Signature:</dt>
2082 <dd class="method-signature">.datepicker( 'setDate'
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>
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.
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.
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 />
2134 <p class="theme-note">
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>.
2144 Pre-expand include size: 82188 bytes
2145 Post-expand include size: 161480 bytes
2146 Template argument size: 101067 bytes
2147 Maximum: 2097152 bytes
2150 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3346-1!1!0!!en!2 and timestamp 20090604112218 -->