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