Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

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