source: ether_statistics/web/resources/js/library/jquery-ui-1.9.0.custom/development-bundle/docs/datepicker.html @ 604

Last change on this file since 604 was 604, checked in by vmipsl, 12 years ago

images
File size: 42.3 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <meta charset="utf-8">
5        <title>jQuery UI datepicker documentation</title>
6
7        <style>
8        body {
9                font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
10        }
11        .gutter {
12                display: none;
13        }
14        </style>
15</head>
16<body>
17
18<script>{
19                "title":
20                        "Datepicker Widget",
21                "excerpt":
22                        "Select a date from a popup or inline calendar",
23                "termSlugs": {
24                        "category": [
25                                "widgets"
26                        ]
27                }
28        }</script><section class="quick-nav"><header><h2>QuickNav</h2></header><div class="quick-nav-section">
29<h3>Options</h3>
30<div><a href="#option-altField">altField</a></div>
31<div><a href="#option-altFormat">altFormat</a></div>
32<div><a href="#option-appendText">appendText</a></div>
33<div><a href="#option-autoSize">autoSize</a></div>
34<div><a href="#option-buttonImage">buttonImage</a></div>
35<div><a href="#option-buttonImageOnly">buttonImageOnly</a></div>
36<div><a href="#option-buttonText">buttonText</a></div>
37<div><a href="#option-calculateWeek">calculateWeek</a></div>
38<div><a href="#option-changeMonth">changeMonth</a></div>
39<div><a href="#option-changeYear">changeYear</a></div>
40<div><a href="#option-closeText">closeText</a></div>
41<div><a href="#option-constrainInput">constrainInput</a></div>
42<div><a href="#option-currentText">currentText</a></div>
43<div><a href="#option-dateFormat">dateFormat</a></div>
44<div><a href="#option-dayNames">dayNames</a></div>
45<div><a href="#option-dayNamesMin">dayNamesMin</a></div>
46<div><a href="#option-dayNamesShort">dayNamesShort</a></div>
47<div><a href="#option-defaultDate">defaultDate</a></div>
48<div><a href="#option-duration">duration</a></div>
49<div><a href="#option-firstDay">firstDay</a></div>
50<div><a href="#option-gotoCurrent">gotoCurrent</a></div>
51<div><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></div>
52<div><a href="#option-isRTL">isRTL</a></div>
53<div><a href="#option-maxDate">maxDate</a></div>
54<div><a href="#option-minDate">minDate</a></div>
55<div><a href="#option-monthNames">monthNames</a></div>
56<div><a href="#option-monthNamesShort">monthNamesShort</a></div>
57<div><a href="#option-navigationAsDateFormat">navigationAsDateFormat</a></div>
58<div><a href="#option-nextText">nextText</a></div>
59<div><a href="#option-numberOfMonths">numberOfMonths</a></div>
60<div><a href="#option-prevText">prevText</a></div>
61<div><a href="#option-selectOtherMonths">selectOtherMonths</a></div>
62<div><a href="#option-shortYearCutoff">shortYearCutoff</a></div>
63<div><a href="#option-showAnim">showAnim</a></div>
64<div><a href="#option-showButtonPanel">showButtonPanel</a></div>
65<div><a href="#option-showCurrentAtPos">showCurrentAtPos</a></div>
66<div><a href="#option-showMonthAfterYear">showMonthAfterYear</a></div>
67<div><a href="#option-showOn">showOn</a></div>
68<div><a href="#option-showOptions">showOptions</a></div>
69<div><a href="#option-showOtherMonths">showOtherMonths</a></div>
70<div><a href="#option-showWeek">showWeek</a></div>
71<div><a href="#option-stepMonths">stepMonths</a></div>
72<div><a href="#option-weekHeader">weekHeader</a></div>
73<div><a href="#option-yearRange">yearRange</a></div>
74<div><a href="#option-yearSuffix">yearSuffix</a></div>
75<div><a href="#option-beforeShow">beforeShow</a></div>
76<div><a href="#option-beforeShowDay">beforeShowDay</a></div>
77<div><a href="#option-onChangeMonthYear">onChangeMonthYear</a></div>
78<div><a href="#option-onClose">onClose</a></div>
79<div><a href="#option-onSelect">onSelect</a></div>
80</div>
81<div class="quick-nav-section">
82<h3>Methods</h3>
83<div><a href="#method-destroy">destroy</a></div>
84<div><a href="#method-dialog">dialog</a></div>
85<div><a href="#method-isDisabled">isDisabled</a></div>
86<div><a href="#method-hide">hide</a></div>
87<div><a href="#method-show">show</a></div>
88<div><a href="#method-refresh">refresh</a></div>
89<div><a href="#method-getDate">getDate</a></div>
90<div><a href="#method-setDate">setDate</a></div>
91</div>
92<div class="quick-nav-section"><h3>Events</h3></div></section><article id="datepicker1" class="entry widget"><h2 class="section-title">
93<span>Datepicker Widget</span><span class="version-details">version added: 1.0</span>
94</h2>
95<div class="entry-wrapper">
96<p class="desc"><strong>Description: </strong>Select a date from a popup or inline calendar</p>
97<section id="options"><header><h2 class="underline">Options</h2></header><div id="option-altField" class="api-item first-item">
98<h3>altField<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#jQuery">jQuery</a> or <a href="http://api.jquery.com/Types#Element">Element</a></span>
99</h3>
100<div class="default">
101<strong>Default: </strong><code>""</code>
102</div>
103<div>An input element that is to be updated with the selected date from the datepicker. Use the <a href="#option-altFormat"><code>altFormat</code></a> option to change the format of the date within this field. Leave as blank for no alternate field.</div>
104</div>
105<div id="option-altFormat" class="api-item">
106<h3>altFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
107</h3>
108<div class="default">
109<strong>Default: </strong><code>""</code>
110</div>
111<div>The <a href="#option-dateFormat"><code>dateFormat</code></a> to be used for the <a href="#option-altField"><code>altField</code></a> 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 [[UI/Datepicker/formatDate|formatDate]] function</div>
112</div>
113<div id="option-appendText" class="api-item">
114<h3>appendText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
115</h3>
116<div class="default">
117<strong>Default: </strong><code>""</code>
118</div>
119<div>The text to display after each date field, e.g., to show the required format.</div>
120</div>
121<div id="option-autoSize" class="api-item">
122<h3>autoSize<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
123</h3>
124<div class="default">
125<strong>Default: </strong><code>false</code>
126</div>
127<div>Set to <code>true</code> to automatically resize the input field to accommodate dates in the current <a href="#option-dateFormat"><code>dateFormat</code></a>.</div>
128</div>
129<div id="option-beforeShow" class="api-item">
130<h3>beforeShow<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#Element">Element</a> input, <a href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
131</h3>
132<div class="default">
133<strong>Default: </strong><code>null</code>
134</div>
135<div>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.</div>
136</div>
137<div id="option-beforeShowDay" class="api-item">
138<h3>beforeShowDay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#Date">Date</a> date )</span>
139</h3>
140<div class="default">
141<strong>Default: </strong><code>null</code>
142</div>
143<div>A function takes a date as a parameter and must return an array with <code>[0]</code> equal to <code>true</code>/<code>false</code> indicating whether or not this date is selectable, <code>[1]</code> equal to a CSS class name or <code>""</code> for the default presentation, and <code>[2]</code> an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.</div>
144</div>
145<div id="option-buttonImage" class="api-item">
146<h3>buttonImage<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
147</h3>
148<div class="default">
149<strong>Default: </strong><code>""</code>
150</div>
151<div>The URL for the popup button image. If set, the <a href="#option-buttonText"><code>buttonText</code></a> option becomes the <code>alt</code> value and is not directly displayed.</div>
152</div>
153<div id="option-buttonImageOnly" class="api-item">
154<h3>buttonImageOnly<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
155</h3>
156<div class="default">
157<strong>Default: </strong><code>false</code>
158</div>
159<div>Whether the button image should be rendered by itself instead of inside a button element.</div>
160</div>
161<div id="option-buttonText" class="api-item">
162<h3>buttonText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
163</h3>
164<div class="default">
165<strong>Default: </strong><code>"..."</code>
166</div>
167<div>The text to display on the trigger button. Use in conjunction with the <a href="#option-showOn"><code>showOn</code></a> option set to <code>"button"</code> or <code>"both"</code>.</div>
168</div>
169<div id="option-calculateWeek" class="api-item">
170<h3>calculateWeek<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
171</h3>
172<div class="default">
173<strong>Default: </strong><code>jQuery.datepicker.iso8601Week</code>
174</div>
175<div>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.</div>
176</div>
177<div id="option-changeMonth" class="api-item">
178<h3>changeMonth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
179</h3>
180<div class="default">
181<strong>Default: </strong><code>false</code>
182</div>
183<div>Whether the month should be rendered as a dropdown instead of text.</div>
184</div>
185<div id="option-changeYear" class="api-item">
186<h3>changeYear<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
187</h3>
188<div class="default">
189<strong>Default: </strong><code>false</code>
190</div>
191<div>Whether the year should be rendered as a dropdown instead of text. Use the <a href="#option-yearRange"><code>yearRange</code></a> option to control which years are made available for selection.</div>
192</div>
193<div id="option-closeText" class="api-item">
194<h3>closeText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
195</h3>
196<div class="default">
197<strong>Default: </strong><code>"Done"</code>
198</div>
199<div>The text to display for the close link. Use the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option to display this button.</div>
200</div>
201<div id="option-constrainInput" class="api-item">
202<h3>constrainInput<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
203</h3>
204<div class="default">
205<strong>Default: </strong><code>true</code>
206</div>
207<div>When <code>true</code>, entry in the input field is constrained to those characters allowed by the current <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
208</div>
209<div id="option-currentText" class="api-item">
210<h3>currentText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
211</h3>
212<div class="default">
213<strong>Default: </strong><code>"Today"</code>
214</div>
215<div>The text to display for the current day link. Use the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option to display this button.</div>
216</div>
217<div id="option-dateFormat" class="api-item">
218<h3>dateFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
219</h3>
220<div class="default">
221<strong>Default: </strong><code>"mm/dd/yy"</code>
222</div>
223<div>The format for parsed and displayed dates. For a full list of the possible formats see the <code>[[UI/Datepicker/formatDate|formatDate]]</code> function.</div>
224</div>
225<div id="option-dayNames" class="api-item">
226<h3>dayNames<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
227</h3>
228<div class="default">
229<strong>Default: </strong><code>[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]</code>
230</div>
231<div>The list of long day names, starting from Sunday, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
232</div>
233<div id="option-dayNamesMin" class="api-item">
234<h3>dayNamesMin<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
235</h3>
236<div class="default">
237<strong>Default: </strong><code>[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]</code>
238</div>
239<div>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker.</div>
240</div>
241<div id="option-dayNamesShort" class="api-item">
242<h3>dayNamesShort<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
243</h3>
244<div class="default">
245<strong>Default: </strong><code>[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]</code>
246</div>
247<div>The list of abbreviated day names, starting from Sunday, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
248</div>
249<div id="option-defaultDate" class="api-item">
250<h3>defaultDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Date">Date</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
251</h3>
252<div class="default">
253<strong>Default: </strong><code>null</code>
254</div>
255<div>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>[[UI/Datepicker#option-dateFormat|dateFormat]]</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.</div>
256<strong>Multiple types supported:</strong><ul>
257<li>
258<strong>Date</strong>: A date object containing the default date.</li>
259<li>
260<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li>
261<li>
262<strong>String</strong>: A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</li>
263</ul>
264</div>
265<div id="option-duration" class="api-item">
266<h3>duration<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#"></a> or <a href="http://api.jquery.com/Types#String">String</a></span>
267</h3>
268<div class="default">
269<strong>Default: </strong><code>"normal"</code>
270</div>
271<div>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").</div>
272</div>
273<div id="option-firstDay" class="api-item">
274<h3>firstDay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Integer">Integer</a></span>
275</h3>
276<div class="default">
277<strong>Default: </strong><code>0</code>
278</div>
279<div>Set the first day of the week: Sunday is <code>0</code>, Monday is <code>1</code>, etc.</div>
280</div>
281<div id="option-gotoCurrent" class="api-item">
282<h3>gotoCurrent<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
283</h3>
284<div class="default">
285<strong>Default: </strong><code>false</code>
286</div>
287<div>When <code>true</code>, the current day link moves to the currently selected date instead of today.</div>
288</div>
289<div id="option-hideIfNoPrevNext" class="api-item">
290<h3>hideIfNoPrevNext<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
291</h3>
292<div class="default">
293<strong>Default: </strong><code>false</code>
294</div>
295<div>Normally the previous and next links are disabled when not applicable (see the <a href="#option-minDate"><code>minDate</code></a> and <a href="#option-maxDate"><code>maxDate</code></a> options). You can hide them altogether by setting this attribute to <code>true</code>.</div>
296</div>
297<div id="option-isRTL" class="api-item">
298<h3>isRTL<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
299</h3>
300<div class="default">
301<strong>Default: </strong><code>false</code>
302</div>
303<div>Whether the current language is drawn from right to left.</div>
304</div>
305<div id="option-maxDate" class="api-item">
306<h3>maxDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Date">Date</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
307</h3>
308<div class="default">
309<strong>Default: </strong><code>null</code>
310</div>
311<div>The maximum selectable date. When set to <code>null</code>, there is no maximum.</div>
312<strong>Multiple types supported:</strong><ul>
313<li>
314<strong>Date</strong>: A date object containing the maximum date.</li>
315<li>
316<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li>
317<li>
318<strong>String</strong>: A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</li>
319</ul>
320</div>
321<div id="option-minDate" class="api-item">
322<h3>minDate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Date">Date</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
323</h3>
324<div class="default">
325<strong>Default: </strong><code>null</code>
326</div>
327<div>The minimum selectable date. When set to <code>null</code>, there is no minimum.</div>
328<strong>Multiple types supported:</strong><ul>
329<li>
330<strong>Date</strong>: A date object containing the minimum date.</li>
331<li>
332<strong>Number</strong>: A number of days from today. For example <code>2</code> represents two days from today and <code>-1</code> represents yesterday.</li>
333<li>
334<strong>String</strong>: A string in the format defined by the <a href="#option-dateFormat"><code>dateFormat</code></a> option, or a relative date. Relative dates must contain value and period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, and <code>"d"</code> for days. For example, <code>"+1m +7d"</code> represents one month and seven days from today.</li>
335</ul>
336</div>
337<div id="option-monthNames" class="api-item">
338<h3>monthNames<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
339</h3>
340<div class="default">
341<strong>Default: </strong><code>[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]</code>
342</div>
343<div>The list of full month names, for use as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
344</div>
345<div id="option-monthNamesShort" class="api-item">
346<h3>monthNamesShort<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
347</h3>
348<div class="default">
349<strong>Default: </strong><code>[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</code>
350</div>
351<div>The list of abbreviated month names, as used in the month header on each datepicker and as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a> option.</div>
352</div>
353<div id="option-navigationAsDateFormat" class="api-item">
354<h3>navigationAsDateFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
355</h3>
356<div class="default">
357<strong>Default: </strong><code>false</code>
358</div>
359<div>Whether the <a href="#option-prevText"><code>prevText</code></a> and <a href="#option-nextText"><code>nextText</code></a> options should be parsed as dates by the <code>[[UI/Datepicker/formatDate|formatDate]]</code> function, allowing them to display the target month names for example.</div>
360</div>
361<div id="option-nextText" class="api-item">
362<h3>nextText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
363</h3>
364<div class="default">
365<strong>Default: </strong><code>"Next"</code>
366</div>
367<div>The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon.</div>
368</div>
369<div id="option-numberOfMonths" class="api-item">
370<h3>numberOfMonths<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#Array">Array</a></span>
371</h3>
372<div class="default">
373<strong>Default: </strong><code>1</code>
374</div>
375<div>The number of months to show at once.</div>
376<strong>Multiple types supported:</strong><ul>
377<li>
378<strong>Number</strong>: The number of months to display in a single row.</li>
379<li>
380<strong>Array</strong>: An array defining the number of rows and columns to display.</li>
381</ul>
382</div>
383<div id="option-onChangeMonthYear" class="api-item">
384<h3>onChangeMonthYear<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#Integer">Integer</a> year, <a href="http://api.jquery.com/Types#Integer">Integer</a> month, <a href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
385</h3>
386<div class="default">
387<strong>Default: </strong><code>null</code>
388</div>
389<div>Called 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.</div>
390</div>
391<div id="option-onClose" class="api-item">
392<h3>onClose<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#String">String</a> dateText, <a href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
393</h3>
394<div class="default">
395<strong>Default: </strong><code>null</code>
396</div>
397<div>Called when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text (<code>""</code> if none) and the datepicker instance as parameters. <code>this</code> refers to the associated input field.</div>
398</div>
399<div id="option-onSelect" class="api-item">
400<h3>onSelect<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#String">String</a> dateText, <a href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
401</h3>
402<div class="default">
403<strong>Default: </strong><code>null</code>
404</div>
405<div>Called 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.</div>
406</div>
407<div id="option-prevText" class="api-item">
408<h3>prevText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
409</h3>
410<div class="default">
411<strong>Default: </strong><code>"Prev"</code>
412</div>
413<div>The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon.</div>
414</div>
415<div id="option-selectOtherMonths" class="api-item">
416<h3>selectOtherMonths<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
417</h3>
418<div class="default">
419<strong>Default: </strong><code>false</code>
420</div>
421<div>Whether days in other months shown before or after the current month are selectable. This only applies if the <a href="#option-showOtherMonths"><code>showOtherMonths</code></a> option is set to <code>true</code>.</div>
422</div>
423<div id="option-shortYearCutoff" class="api-item">
424<h3>shortYearCutoff<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
425</h3>
426<div class="default">
427<strong>Default: </strong><code>"+10"</code>
428</div>
429<div>The cutoff year for determining the century for a date (used in conjunction with <code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code> 'y'). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century.</div>
430<strong>Multiple types supported:</strong><ul>
431<li>
432<strong>Number</strong>: A value between <code>0</code> and <code>99</code> indicating the cutoff year.</li>
433<li>
434<strong>String</strong>: A relative number of years from the current year, e.g., <code>"+3"</code> or <code>"-5"</code>.</li>
435</ul>
436</div>
437<div id="option-showAnim" class="api-item">
438<h3>showAnim<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
439</h3>
440<div class="default">
441<strong>Default: </strong><code>"show"</code>
442</div>
443<div>The name of the animation used to show and hide the datepicker. Use <code>"show"</code> (the default), <code>"slideDown"</code>, <code>"fadeIn"</code>, any of the <a href="/category/effects/">jQuery UI effects</a>. Set to an empty string to disable animation.</div>
444</div>
445<div id="option-showButtonPanel" class="api-item">
446<h3>showButtonPanel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
447</h3>
448<div class="default">
449<strong>Default: </strong><code>false</code>
450</div>
451<div>Whether to show the button panel.</div>
452</div>
453<div id="option-showCurrentAtPos" class="api-item">
454<h3>showCurrentAtPos<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
455</h3>
456<div class="default">
457<strong>Default: </strong><code>0</code>
458</div>
459<div>When displaying multiple months via the <a href="#option-numberOfMonths"><code>numberOfMonths</code></a> option, the <code>showCurrentAtPos</code> option defines which position to display the current month in.</div>
460</div>
461<div id="option-showMonthAfterYear" class="api-item">
462<h3>showMonthAfterYear<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
463</h3>
464<div class="default">
465<strong>Default: </strong><code>false</code>
466</div>
467<div>Whether to show the month after the year in the header.</div>
468</div>
469<div id="option-showOn" class="api-item">
470<h3>showOn<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
471</h3>
472<div class="default">
473<strong>Default: </strong><code>"focus"</code>
474</div>
475<div>When the datepicker should appear. The datepicker can appear when the field receives focus (<code>"focus"</code>), when a button is clicked (<code>"button"</code>), or when either event occurs (<code>"both"</code>).</div>
476</div>
477<div id="option-showOptions" class="api-item">
478<h3>showOptions<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Object">Object</a></span>
479</h3>
480<div class="default">
481<strong>Default: </strong><code>{}</code>
482</div>
483<div>If using one of the jQuery UI effects for the <a href="#option-showAnim"><code>showAnim</code></a> option, you can provide additional settings for that animation via this option.</div>
484</div>
485<div id="option-showOtherMonths" class="api-item">
486<h3>showOtherMonths<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
487</h3>
488<div class="default">
489<strong>Default: </strong><code>false</code>
490</div>
491<div>Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the <a href="#option-selectOtherMonths"><code>selectOtherMonths</code></a> option.</div>
492</div>
493<div id="option-showWeek" class="api-item">
494<h3>showWeek<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
495</h3>
496<div class="default">
497<strong>Default: </strong><code>false</code>
498</div>
499<div>When <code>true</code>, a column is added to show the week of the year. The <a href="#option-calculateWeek"><code>calculateWeek</code></a> option determines how the week of the year is calculated. You may also want to change the <a href="#option-firstDay"><code>firstDay</code></a> option.</div>
500</div>
501<div id="option-stepMonths" class="api-item">
502<h3>stepMonths<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
503</h3>
504<div class="default">
505<strong>Default: </strong><code>1</code>
506</div>
507<div>Set how many months to move when clicking the previous/next links.</div>
508</div>
509<div id="option-weekHeader" class="api-item">
510<h3>weekHeader<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
511</h3>
512<div class="default">
513<strong>Default: </strong><code>"Wk"</code>
514</div>
515<div>The text to display for the week of the year column heading. Use the <a href="#option-showWeek"><code>showWeek</code></a> option to display this column.</div>
516</div>
517<div id="option-yearRange" class="api-item">
518<h3>yearRange<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
519</h3>
520<div class="default">
521<strong>Default: </strong><code>"c-10:c+10"</code>
522</div>
523<div>The range of years displayed in the year drop-down: either relative to today's year (<code>"-nn:+nn"</code>), relative to the currently selected year (<code>"c-nn:c+nn"</code>), absolute (<code>"nnnn:nnnn"</code>), or combinations of these formats (<code>"nnnn:-nn"</code>). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the <a href="#option-minDate"><code>minDate</code></a> and/or <a href="#option-maxDate"><code>maxDate</code></a> options.</div>
524</div>
525<div id="option-yearSuffix" class="api-item">
526<h3>yearSuffix<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
527</h3>
528<div class="default">
529<strong>Default: </strong><code>""</code>
530</div>
531<div>Additional text to display after the year in the month headers.</div>
532</div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
533<h3>destroy()</h3>
534<div>
535                Removes the datepicker functionality completely. This will return the element back to its pre-init state.
536        </div>
537</div></div>
538<div id="method-dialog"><div class="api-item">
539<h3>dialog( date [, onSelect ] [, settings ] [, pos ] )</h3>
540<div>Opens the datepicker in a dialog box.</div>
541<ul>
542<li>
543<div><strong>date</strong></div>
544<div>Type: <a href="http://api.jquery.com/Types#String">String</a> or <a href="http://api.jquery.com/Types#Date">Date</a>
545</div>
546<div>The initial date.</div>
547</li>
548<li>
549<div><strong>onSelect</strong></div>
550<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
551<div>A callback function when a date is selected. The function receives the date text and date picker instance as parameters.</div>
552</li>
553<li>
554<div><strong>settings</strong></div>
555<div>Type: <a href="http://api.jquery.com/Types#Options">Options</a>
556</div>
557<div>The new settings for the date picker.</div>
558</li>
559<li>
560<div><strong>pos</strong></div>
561<div>Type: <a href="http://api.jquery.com/Types#Number%5B2%5D%20or%20MouseEvent">Number[2] or MouseEvent</a>
562</div>
563<div>The position of the top/left of the dialog as <code>[x, y]</code> or a <code>MouseEvent</code> that contains the coordinates. If not specified the dialog is centered on the screen.</div>
564</li>
565</ul>
566</div></div>
567<div id="method-getDate"><div class="api-item">
568<h3>getDate() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Date">Date</a></span>
569</h3>
570<div>Returns the current date for the datepicker or <code>null</code> if no date has been selected.</div>
571</div></div>
572<div id="method-hide"><div class="api-item">
573<h3>hide()</h3>
574<div>Close a previously opened date picker.</div>
575</div></div>
576<div id="method-isDisabled"><div class="api-item">
577<h3>isDisabled() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
578</h3>
579<div>Determine whether a date picker has been disabled.</div>
580</div></div>
581<div id="method-refresh"><div class="api-item">
582<h3>refresh()</h3>
583<div>Redraw the date picker, after having made some external modifications.</div>
584</div></div>
585<div id="method-setDate"><div class="api-item">
586<h3>setDate( date )</h3>
587<div>Sets the date for the datepicker. The new date may be a <code>Date</code> object or a string in the current <a href="#option-dateFormat">date format</a> (e.g., <code>"01/26/2009"</code>), a number of days from today (e.g., <code>+7</code>) or a string of values and periods (<code>"y"</code> for years, <code>"m"</code> for months, <code>"w"</code> for weeks, <code>"d"</code> for days, e.g., <code>"+1m +7d"</code>), or <code>null</code> to clear the selected date.</div>
588<ul><li>
589<div><strong>date</strong></div>
590<div>Type: <a href="http://api.jquery.com/Types#Date">Date</a>
591</div>
592<div>The new date.</div>
593</li></ul>
594</div></div>
595<div id="method-show"><div class="api-item">
596<h3>show()</h3>
597<div>Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.</div>
598</div></div></section><div class="longdesc">
599                <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>
600
601                <p>By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.</p>
602
603                <h3>Keyboard interaction</h3>
604                <p>While the datepicker is open, the following key commands are available:</p>
605                <ul>
606                        <li>PAGE UP: Move to the previous month.</li>
607                        <li>PAGE DOWN: Move to the next month.</li>
608                        <li>CTRL+PAGE UP: Move to the previous year.</li>
609                        <li>CTRL+PAGE DOWN: Move to the next year.</li>
610                        <li>CTRL+HOME: Move to the current month. Open the datepicker if closed.</li>
611                        <li>CTRL+LEFT: Move to the previous day.</li>
612                        <li>CTRL+RIGHT: Move to the next day.</li>
613                        <li>CTRL+UP: Move to the previous week.</li>
614                        <li>CTRL+DOWN: Move the next week.</li>
615                        <li>ENTER: Select the focused date.</li>
616                        <li>CTRL+END: Close the datepicker and erase the date.</li>
617                        <li>ESCAPE: Close the datepicker without selection.</li>
618                </ul>
619
620                <h3 id="utility-functions">Utility functions</h3>
621                <ul>
622                        <li>$.datepicker.setDefaults( settings ) - Set settings for all datepicker instances.</li>
623                        <li>$.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.</li>
624                        <li>$.datepicker.parseDate( format, value, settings )  - Extract a date from a string value with a specified format.</li>
625                        <li>$.datepicker.iso8601Week( date ) - Determine the week of the year for a given date: 1 to 53.</li>
626                        <li>$.datepicker.noWeekends - Set as beforeShowDay function to prevent selection of weekends.</li>
627                </ul>
628
629                <h3>Localization</h3>
630                <p>Datepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g., <code>jquery.ui.datepicker-fr.js</code> for French. The desired localization file should be included after the main datepicker code. Each localization file adds its settings to the set of available localizations and automatically applies them as defaults for all instances.</p>
631                <p>The <code>$.datepicker.regional</code> attribute holds an array of localizations, indexed by language code, with <code>""</code> referring to the default (English). Each entry is an object with the following attributes: <code>closeText</code>, <code>prevText</code>, <code>nextText</code>, <code>currentText</code>, <code>monthNames</code>, <code>monthNamesShort</code>, <code>dayNames</code>, <code>dayNamesShort</code>, <code>dayNamesMin</code>, <code>weekHeader</code>, <code>dateFormat</code>, <code>firstDay</code>, <code>isRTL</code>, <code>showMonthAfterYear</code>, and <code>yearSuffix</code>.</p>
632                <p>You can restore the default localizations with:</p>
633                <code>$.datepicker.setDefaults( $.datepicker.regional[ "" ] );</code>
634                <p>And can then override an individual datepicker for a specific locale:</p>
635                <code>$( selector ).datepicker( $.datepicker.regional[ "fr" ] );</code>
636        </div>
637<h3>Additional Notes:</h3>
638<div class="longdesc"><ul><li>
639                        This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
640                </li></ul></div>
641<section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
642<h4><span class="desc">A simple jQuery UI Datepicker.</span></h4>
643<div class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">&lt;!doctype html&gt;</code></div><div class="line number2 index1 alt1"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;datepicker demo&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css</a>"</code><code class="plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.2.js">http://code.jquery.com/jquery-1.8.2.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.0/jquery-ui.js">http://code.jquery.com/ui/1.9.0/jquery-ui.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number9 index8 alt2"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number10 index9 alt1"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number11 index10 alt2">&nbsp;</div><div class="line number12 index11 alt1"><code class="plain">&lt;</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"datepicker"</code><code class="plain">&gt;&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="plain">&lt;</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number15 index14 alt2"><code class="plain">$( "#datepicker" ).datepicker();</code></div><div class="line number16 index15 alt1"><code class="plain">&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number17 index16 alt2">&nbsp;</div><div class="line number18 index17 alt1"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number19 index18 alt2"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></div></div></td></tr></tbody></table></div>
644<h4>Demo:</h4>
645<div class="demo code-demo" data-height="300"></div>
646</div></section>
647</div></article>
648
649</body>
650</html>
Note: See TracBrowser for help on using the repository browser.