| [ Index ] |
PHP Cross Reference of Drupal 6 (gatewave) |
[Summary view] [Print] [Text view]
1 <script type="text/javascript"> 2 // Prepare to show a date picker linked to three select controls 3 function readLinked() { 4 $("#linkedDates").val($("#selectMonth").val() + "/" + 5 $("#selectDay").val() + "/" + $("#selectYear").val()); 6 return {}; 7 } 8 9 // Update three select controls to match a date picker selection 10 function updateLinked(date) { 11 $("#selectMonth").val(date.substring(0, 2)); 12 $("#selectDay").val(date.substring(3, 5)); 13 $("#selectYear").val(date.substring(6, 10)); 14 } 15 16 // Prevent selection of invalid dates through the select controls 17 function checkLinkedDays() { 18 var daysInMonth = 32 - new Date($("#selectYear").val(), 19 $("#selectMonth").val() - 1, 32).getDate(); 20 $("#selectDay option").attr("disabled", ""); 21 $("#selectDay option:gt(" + (daysInMonth - 1) +")").attr("disabled", "disabled"); 22 if ($("#selectDay").val() > daysInMonth) { 23 $("#selectDay").val(daysInMonth); 24 } 25 } 26 function customRange(input) { 27 return {minDate: (input.id == "endDate" ? $("#startDate").datepicker("getDate") : null), 28 maxDate: (input.id == "startDate" ? $("#endDate").datepicker("getDate") : null)}; 29 } 30 </script> 31 32 <script type="text/javascript"> 33 34 var model = { 35 36 renderAt: '#containerDemo', 37 38 title: 'Datepicker Demos', 39 40 demos: [ 41 42 { 43 title: 'Datepicker Basics', 44 desc: 'A datepicker can easily be added to an input field with default settings:' + 45 '<ul style="list-style: disc; padding-left: 2em;"><li>Datepicker appears on focus</li>' + 46 '<li>Text is in English</li>' + 47 '<li>Date format is mm/dd/yyyy</li>' + 48 '<li>Clear/Close controls show at the top</li>' + 49 '<li>Month and year are selectable directly</li>' + 50 '<li>10 years before and after the current year are shown</li>' + 51 '<li>Show a single month</li>' + 52 '<li>Select a single date</li>' + 53 '<li>Week starts on Sunday</li>' + 54 '<li>Day names are clickable to change the first day of the week</li>' + 55 '<li>Days in other months are not displayed</li>' + 56 '<li>No date restrictions</li>' + 57 '<li>Clicking elsewhere closes the date picker</li></ul>', 58 html: '<input type="text" size="10" value="click here" id="basics"/>\n' + 59 '<style type="text/css">.embed + img { position: relative; left: -21px; top: -1px; }</style>', 60 destroy: '$("#basics").removeClass("embed").datepicker("enable").datepicker("destroy");', 61 62 options: [ 63 { desc: 'Default datepicker - open on focus', source: '$("#basics").datepicker();' }, 64 { desc: 'Open on button only', source: '$("#basics").datepicker({showOn: "button"});' }, 65 { desc: 'Open on image button only', source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 66 { desc: 'Open on focus or button', source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 67 { desc: 'Embed the button in the input (with CSS)', source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).addClass("embed");' }, 68 { desc: 'Disabled datepicker', source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).datepicker("disable");' } 69 ] 70 }, 71 72 { 73 title: 'Keystrokes', 74 desc: 'You can use the keyboard to enter dates and to control the datepicker:' + 75 '<ul style="list-style: disc; padding-left: 2em;"><li>page up/down - previous/next month (based on <i>stepMonths</i>)</li>' + 76 '<li>ctrl+page up/down - previous/next year (based on <i>stepBigMonths</i>)</li>' + 77 '<li>ctrl+home - current month or open when closed</li>' + 78 '<li>ctrl+left/right - previous/next day</li>' + 79 '<li>ctrl+up/down - previous/next week</li>' + 80 '<li>enter - accept the selected date</li>' + 81 '<li>ctrl+end - close and erase the date</li>' + 82 '<li>escape - close the datepicker without selection</li></ul>', 83 html: '<input type="text" size="10" value="" id="keys"/>', 84 destroy: '$("#keys").removeAttr("readonly").datepicker("destroy");', 85 86 options: [ 87 { desc: 'Default datepicker', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 88 { desc: 'Readonly input', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).attr("readonly", "readonly");' } 89 ] 90 }, 91 92 { 93 title: 'Restricting Datepicker', 94 desc: 'A datepicker can have its basic functionality restricted in various ways.', 95 html: '<input type="text" size="10" value="" id="restricting"/>', 96 destroy: '$("#restricting").datepicker("destroy");', 97 98 options: [ 99 { desc: 'First day of week is Monday and can\'t change it', source: '$("#restricting").datepicker({firstDay: 1, changeFirstDay: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 100 { desc: 'Can\'t change month/year from dropdowns', source: '$("#restricting").datepicker({changeMonth: false, changeYear: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 101 { desc: 'Year dropdown shows last 20 years', source: '$("#restricting").datepicker({yearRange: "-20:+0", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 102 { desc: 'Year dropdown shows 2000 to 2010', source: '$("#restricting").datepicker({yearRange: "2000:2010", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 103 { desc: 'Dates from Jan 26 2005 to Jan 26 2007 only', source: '$("#restricting").datepicker({minDate: new Date(2005, 1 - 1, 26), maxDate: new Date(2007, 1 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 104 { desc: 'Dates within the next 365 days only', source: '$("#restricting").datepicker({minDate: 0, maxDate: 365, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 105 { desc: 'Dates from yesterday to 6 years away only', source: '$("#restricting").datepicker({minDate: "-1d", maxDate: "6y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 106 ] 107 }, 108 109 { 110 title: 'Date Formats', 111 desc: 'A datepicker can display its value in numerous formats, with the default being "mm/dd/yy". ' + 112 'The formatting codes are:' + 113 '<ul style="list-style: disc; padding-left: 2em;"><li>d - day of month (no leading zero)</li>' + 114 '<li>dd - day of month (two digit)</li>' + 115 '<li>D - day name short</li>' + 116 '<li>DD - day name long</li>' + 117 '<li>m - month of year (no leading zero)</li>' + 118 '<li>mm - month of year (two digit)</li>' + 119 '<li>M - month name short</li>' + 120 '<li>MM - month name long</li>' + 121 '<li>y - year (two digit)</li>' + 122 '<li>yy - year (four digit)</li>' + 123 '<li>@ - Unix timestamp (ms since 01/01/1970)</li>' + 124 '<li>\'...\' - literal text</li>' + 125 '<li>\'\' - single quote</li></ul>', 126 html: '<input type="text" size="30" value="" id="formatted"/>', 127 destroy: '$("#formatted").datepicker("destroy");', 128 129 options: [ 130 { desc: 'Medium format', source: '$("#formatted").datepicker({dateFormat: "M d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 131 { desc: 'Long format', source: '$("#formatted").datepicker({dateFormat: "MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 132 { desc: 'Full format', source: '$("#formatted").datepicker({dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 133 { desc: 'French full format', source: '$("#formatted").datepicker($.extend({}, $.datepicker.regional["fr"], {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' }, 134 { desc: 'With no century', source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 135 { desc: 'ATOM format (ISO 8601)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.ATOM, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 136 { desc: 'Cookie format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.COOKIE, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 137 { desc: 'ISO 8601 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.ISO_8601, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 138 { desc: 'RFC 822 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 139 { desc: 'RFC 850 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_850, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 140 { desc: 'RFC 1026 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1036, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 141 { desc: 'RFC 1123 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1123, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 142 { desc: 'RFC 2822 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_2822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 143 { desc: 'RSS format (RFC 822)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RSS, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 144 { desc: 'Timestamp format (ms since 01/01/1970)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.TIMESTAMP, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 145 { desc: 'W3C format (ISO 8601)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.W3C, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 146 ] 147 }, 148 149 { 150 title: 'Day-by-day Modifications', 151 desc: 'You have several mechanisms for modifying the datepicker\'s appearance on a day-by-day basis.', 152 html: { url: 'templates/ui.datepicker.dbd.html' }, 153 destroy: '$("#dayByDay").datepicker("destroy");', 154 155 options: [ 156 { desc: 'Weekends are not selectable', source: '$("#dayByDay").datepicker({beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 157 { desc: 'Highlight some national days (via CSS)', source: '$("#dayByDay").datepicker({beforeShowDay: nationalDays, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 158 { desc: 'Show day of year as cell title', source: '$("#dayByDay").datepicker({beforeShowDay: showDayOfYear, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 159 { desc: 'Customise status line for today', source: '$("#dayByDay").datepicker({showStatus: true, statusForDate: highlightToday, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 160 ] 161 }, 162 163 { 164 title: 'Date Ranges', 165 desc: 'Choose a range of dates instead of a single one by clicking firstly on the starting date, then on the ending date.', 166 html: '<input type="text" size="24" value="" id="ranges"/>', 167 destroy: '$("#ranges").datepicker("destroy");', 168 169 options: [ 170 { desc: 'Range select with a single month', source: '$("#ranges").datepicker({rangeSelect: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 171 { desc: 'Range select showing two months', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 172 { desc: 'Range select showing six months (moving three at a time)', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: [2, 3], stepMonths: 3, prevText: "<< Previous Months", nextText: "Next Months >>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 173 { desc: 'Range select excluding weekends', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 174 { desc: 'Range select with min/max settings', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, minDate: "6w", maxDate: "2y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 175 ] 176 }, 177 178 { 179 title: 'Another Date Range', 180 desc: 'Synchronise two datepickers to together select a date range.', 181 html: { url: 'templates/ui.datepicker.two.html' }, 182 destroy: '$("#startDate,#endDate").datepicker("destroy");', 183 184 options: [ 185 { desc: 'Range select with two datepickers', source: '$("#startDate,#endDate").datepicker({beforeShow: customRange, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 186 ] 187 }, 188 189 { 190 title: 'Inline Datepicker', 191 desc: 'A datepicker can also be shown inline, rather than popping-up, by targetting a division instead of an input field. ' + 192 'Use the <i>onSelect</i> callback to be notified of date selections.', 193 html: { url: 'templates/ui.datepicker.inl.html' }, 194 destroy: '$("#inline").datepicker("destroy");$("#altInline").unbind("keyup");', 195 196 options: [ 197 { desc: 'Single month inline', source: '$("#inline").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }});$("#altInline").hide();' }, 198 { desc: 'Range select inline', source: '$("#inline").datepicker({rangeSelect: true, onSelect: function(date) { alert("The chosen dates are " + date); }});$("#altInline").hide();' }, 199 { desc: 'Range select showing two months inline', source: '$("#inline").datepicker({rangeSelect: true, numberOfMonths: 2});$("#altInline").hide();' }, 200 { desc: 'Highlight some national days (via CSS)', source: '$("#inline").datepicker({beforeShowDay: nationalDays});$("#altInline").hide();' }, 201 { desc: 'Inline linked to an input field', source: '$("#inline").datepicker({altField: "#altInline", altFormat: "mm/dd/yy"});$("#altInline").show().keyup(setInlineDate);' }, 202 { desc: 'Disabled inline', source: '$("#inline").datepicker().datepicker("disable");$("#altInline").hide();' } 203 ] 204 }, 205 206 { 207 title: 'Datepicker in a Dialog', 208 desc: 'A datepicker can also be opened within a "dialog" box.', 209 html: { url: 'templates/ui.datepicker.dlg.html' }, 210 destroy: '', 211 212 options: [ 213 { desc: 'Open in a dialog', source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", duration: ""}); return false; });' } 214 ] 215 }, 216 217 { 218 title: 'Datepicker Linked to Dropdowns', 219 desc: 'With a bit of wiring code, you can link the datepicker with three dropdowns for date selection.', 220 html: { url: 'templates/ui.datepicker.sel.html' }, 221 destroy: '', 222 223 options: [ 224 { desc: 'Linked to dropdowns', source: '$("#linkedDates").datepicker({minDate: new Date(2001, 1 - 1, 1), maxDate: new Date(2010, 12 - 1, 31), beforeShow: readLinked, onSelect: updateLinked, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}); $("#selectMonth, #selectYear").change(checkLinkedDays);' } 225 ] 226 }, 227 228 { 229 title: 'Callbacks', 230 desc: 'Custom functions may be invoked when certain events occur within the datepicker.', 231 html: '<input type="text" size="24" value="" id="callbacks"/>', 232 destroy: '$("#callbacks").datepicker("destroy");', 233 234 options: [ 235 { desc: 'On select', source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 236 { desc: 'On close', source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with date " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 237 { desc: 'On change of month/year', source: '$("#callbacks").datepicker({onChangeMonthYear: function(year, month) { alert("Moved to month " + month + "/" + year); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 238 { desc: 'On select for range', source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen dates are " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 239 { desc: 'On close for range', source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with dates " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 240 { desc: 'On change of month/year for range', source: '$("#callbacks").datepicker({onChangeMonthYear: function(year, month) { alert("Moved to month " + month + "/" + year); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 241 ] 242 }, 243 244 { 245 title: 'Alternate Field and Format', 246 desc: 'Simultaneously update an alternate field using an alternate date format. ' + 247 'This could be used to display selected dates in one format, while submitting ' + 248 'the dates in another format from a hidden field. The alternate field is ' + 249 'displayed here to demonstrate the functionality.', 250 html: '<input type="text" size="24" value="" id="alt1" readonly="readonly"/>\n' + 251 '<input type="text" size="24" value="" id="alt2" readonly="readonly"/>', 252 destroy: '$("#alt1").datepicker("destroy"); $("#alt2").val("");', 253 254 options: [ 255 { desc: 'Single date selection', source: '$("#alt1").datepicker({altField: "#alt2", altFormat: "yy-mm-dd", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 256 { desc: 'Range date selection', source: '$("#alt1").datepicker({altField: "#alt2", altFormat: "yy-mm-dd", rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 257 ] 258 }, 259 260 { 261 title: 'Default Date', 262 desc: 'Control which date is shown if the datepicker is opened with no value. The default is today.', 263 html: '<input type="text" size="10" value="" id="defaultDate"/>', 264 destroy: '$("#defaultDate").datepicker("destroy");', 265 266 options: [ 267 { desc: 'Specific date - January 1, 2007', source: '$("#defaultDate").datepicker({defaultDate: new Date(2007, 1 - 1, 1), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 268 { desc: 'Relative date - 7 days from today', source: '$("#defaultDate").datepicker({defaultDate: +7, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 269 { desc: 'Relative date - 2 weeks from today', source: '$("#defaultDate").datepicker({defaultDate: "+2w", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 270 { desc: 'Relative date - 10 days and 1 month from today', source: '$("#defaultDate").datepicker({defaultDate: "+10 D +1 M", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 271 ] 272 }, 273 274 { 275 title: 'Miscellaneous', 276 desc: 'There are many other miscellaneous settings you can apply.', 277 html: '<input type="text" size="10" value="" id="misc"/>', 278 destroy: '$("#misc").datepicker("destroy");', 279 280 options: [ 281 { desc: 'Append text to the datepicker', source: '$("#misc").datepicker({appendText: "(format mm/dd/yyyy)", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 282 { desc: 'Show controls as images', source: '$("#misc").datepicker({clearText: "<img src=\'templates/images/clear.gif\'>", closeText: "<img src=\'templates/images/close.gif\'>", prevText: "<img src=\'templates/images/prev.gif\'>", currentText: "<img src=\'templates/images/calendar.gif\'>", nextText: "<img src=\'templates/images/next.gif\'>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 283 { desc: 'Move Clear/Close controls to the bottom', source: '$("#misc").datepicker({closeAtTop: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 284 { desc: 'Make the datepicker mandatory (no Clear)', source: '$("#misc").datepicker({mandatory: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 285 { desc: 'Show big Prev/Next links', source: '$("#misc").datepicker({showBigPrevNext: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 286 { desc: 'Show big Prev/Next links moving 6 months', source: '$("#misc").datepicker({showBigPrevNext: true, stepBigMonths: 6, prevText: "<", prevBigText: "<6M", nextText: ">", nextBigText: "6M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 287 { desc: 'Hide Prev/Next links if not applicable', source: '$("#misc").datepicker({hideIfNoPrevNext: true, minDate: new Date(2008, 1 - 1, 26), maxDate: new Date(2008, 3 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 288 { desc: 'Prev/Today/Next links as date formats', source: '$("#misc").datepicker({navigationAsDateFormat: true, prevText: "<M", currentText: "M y", nextText: "M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 289 { desc: 'Prev/Today/Next links as date formats in French', source: '$("#misc").datepicker($.extend({}, $.datepicker.regional["fr"], {navigationAsDateFormat: true, prevText: "<MM", currentText: "MM yy", nextText: "MM>", numberOfMonths: 2, stepMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' }, 290 { desc: 'Today link goes to current selection', source: '$("#misc").datepicker({gotoCurrent: true, currentText: "Current", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 291 { desc: 'Show the month select after the year one', source: '$("#misc").datepicker({showMonthAfterYear: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 292 { desc: 'Highlight the hovered week', source: '$("#misc").datepicker({highlightWeek: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 293 { desc: 'Show days from other months', source: '$("#misc").datepicker({showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 294 { desc: 'Show week of the year (ISO 8601)', source: '$("#misc").datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 295 { desc: 'Show a status bar with more explanation', source: '$("#misc").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 296 { desc: 'Show three months at a time', source: '$("#misc").datepicker({numberOfMonths: 3, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 297 { desc: 'Show three months with current in the middle', source: '$("#misc").datepicker({numberOfMonths: 3, showCurrentAtPos: 1, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 298 { desc: 'Show three months ending at current one', source: '$("#misc").datepicker({numberOfMonths: 3, showCurrentAtPos: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 299 ] 300 }, 301 302 { 303 title: 'Inline Configuration', 304 desc: 'You can configure each input field inline by adding attributes with the same name '+ 305 'as the datepicker settings and a "date:" prefix.', 306 html: '<input type="text" size="10" value="" id="config" \n' + 307 'date:closeAtTop="false" date:firstDay="1" date:appendText="(pick a date)"/>', 308 destroy: '$("#config").datepicker("destroy");', 309 310 options: [ 311 { desc: 'Inline configuration - see source', source: '$("#config").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 312 ] 313 }, 314 315 { 316 title: 'Animations', 317 desc: 'You can control how the datepicker appears - both its style and duration. The default is a medium duration animation expanding from the top-left (show).', 318 html: '<input type="text" size="10" value="" id="anim"/>', 319 destroy: '$("#anim").datepicker("destroy");', 320 321 options: [ 322 { desc: 'Show at slow duration', source: '$("#anim").datepicker({duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 323 { desc: 'Show at normal duration (default)', source: '$("#anim").datepicker({duration: "normal", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 324 { desc: 'Show at fast duration', source: '$("#anim").datepicker({duration: "fast", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 325 { desc: 'Show immediately', source: '$("#anim").datepicker({duration: "", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 326 { desc: 'Fade in at normal duration', source: '$("#anim").datepicker({showAnim: "fadeIn", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 327 { desc: 'Slide down at slow duration', source: '$("#anim").datepicker({showAnim: "slideDown", duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 328 { desc: 'Blind horizontally', source: '$("#anim").datepicker({showAnim: "blind", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 329 { desc: 'Blind vertically', source: '$("#anim").datepicker({showAnim: "blind", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 330 { desc: 'Clip horizontally', source: '$("#anim").datepicker({showAnim: "clip", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 331 { desc: 'Clip vertically', source: '$("#anim").datepicker({showAnim: "clip", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 332 { desc: 'Drop up', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 333 { desc: 'Drop down', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 334 { desc: 'Drop left', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 335 { desc: 'Drop right', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 336 { desc: 'Explode (2 secs duration)', source: '$("#anim").datepicker({showAnim: "explode", duration: 2000, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 337 { desc: 'Fold', source: '$("#anim").datepicker({showAnim: "fold", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 338 { desc: 'Puff', source: '$("#anim").datepicker({showAnim: "puff", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 339 { desc: 'Scale to center', source: '$("#anim").datepicker({showAnim: "scale", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 340 { desc: 'Scale to top-left', source: '$("#anim").datepicker({showAnim: "scale", showOptions: {origin: ["top", "left"]}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 341 { desc: 'Slide up', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 342 { desc: 'Slide down', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 343 { desc: 'Slide left', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, 344 { desc: 'Slide right', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } 345 ] 346 }, 347 348 { 349 title: 'International Datepickers', 350 desc: 'Numerous international packs are available for the datepicker.', 351 html: '<input type="text" size="10" value="" id="i18n"/> thanks to <span id="contrib"></span>', 352 destroy: '$("#i18n").datepicker("destroy");', 353 354 options: [ 355 { desc: 'Bahasa Indonesia (Indonesian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["id"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Deden Fathurahman");' }, 356 { desc: 'български език (Bulgarian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["bg"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stoyan Kyosev");' }, 357 { desc: 'Català (Catalan)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ca"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Joan Leon");' }, 358 { desc: 'Čeština (Czech)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["cs"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Tomas Muller");' }, 359 { desc: 'Dansk (Danish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["da"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jan Christensen");' }, 360 { desc: 'Deutsch (German)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["de"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milian Wolff");' }, 361 { desc: 'Español (Spanish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["es"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vester");' }, 362 { desc: 'Esperanto', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["eo"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Olivier M.");' }, 363 { desc: 'Français (French)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stéphane Nahmani");' }, 364 { desc: 'Gjuha shqipe (Albanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sq"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Flakron Bytyqi");' }, 365 { desc: '한국어 (Korean)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ko"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("DaeKwon Kang");' }, 366 { desc: 'Hrvatski jezik (Croatian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vjekoslav Nesek");' }, 367 { desc: 'Հայերեն (Armenian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hy"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Levon Zakaryan");' }, 368 { desc: 'Íslenska (Icelandic)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["is"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Haukur H. Thorsson");' }, 369 { desc: 'Italiano (Italian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["it"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Apaella");' }, 370 { desc: 'Latviešu Valoda (Latvian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lv"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' }, 371 { desc: 'lietuvių kalba (Lithuanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lt"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' }, 372 { desc: 'Magyar (Hungarian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hu"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Istvan Karaszi");' }, 373 { desc: 'Nederlands (Dutch)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["nl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Mathias Bynens");' }, 374 { desc: '日本語 (Japanese)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ja"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milly");' }, 375 { desc: 'Norsk (Norwegian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["no"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Naimdjon Takhirov");' }, 376 { desc: 'ภาษาไทย (Thai)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["th"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("pipo");' }, 377 { desc: 'Polski (Polish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jacek Wysocki");' }, 378 { desc: 'Português (Portuguese/Brazilian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pt-BR"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Leonildo Costa Silva");' }, 379 { desc: 'Română (Romanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ro"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Edmond L.");' }, 380 { desc: 'Русский (Russian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ru"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Andrew Stromnov");' }, 381 { desc: 'Slovenčina (Slovak)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vojtech Rinik");' }, 382 { desc: 'Slovenski Jezik (Slovenian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jaka Jančar");' }, 383 { desc: 'suomi (Finnish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fi"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Harri Kilpiö");' }, 384 { desc: 'Svenska (Swedish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sv"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Anders Ekdahl");' }, 385 { desc: 'Türkçe (Turkish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["tr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Izzet Emre Erkan");' }, 386 { desc: 'Українська (Ukranian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["uk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Maxim Drogobitskiy");' }, 387 { desc: '简体中文 (Chinese Simplified)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-CN"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Cloudream");' }, 388 { desc: '繁體中文 (Chinese Traditional)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-TW"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Ressol");' } 389 ] 390 }, 391 392 { 393 title: 'International Datepickers Right-to-left', 394 desc: 'Some international packs change the orientation of the datepicker to right-to-left.', 395 html: '<input type="text" size="10" value="" id="i18nrtl"/> thanks to <span id="contrib2"></span>', 396 destroy: '$("#i18nrtl").datepicker("destroy");', 397 398 options: [ 399 { desc: '‫العربية (Arabic)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["ar"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Khaled Al Horani");' }, 400 { desc: '‫فارسی (Farsi/Persian)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["fa"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Javad Mowlanezhad");' }, 401 { desc: '‫עברית (Hebrew)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["he"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Amir Hardon");' } 402 ] 403 } 404 405 ] 406 407 }; 408 409 $(function(){ 410 411 uiRenderDemo(model); 412 413 }); 414 415 </script>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Mar 24 11:18:33 2011 | Cross-referenced by PHPXref 0.7 |