| blob | 1cb86204e6ca6dae7a1be52a0d5eac4e47ea3241 |
1 /**
2 * Copyright (c) 2008 Kelvin Luck (http://www.kelvinluck.com/)
3 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
4 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
5 * .
6 * $Id$
7 **/
9 (function($){
11 $.fn.extend({
12 /**
13 * Render a calendar table into any matched elements.
14 *
15 * @param Object s (optional) Customize your calendars.
16 * @option Number month The month to render (NOTE that months are zero based). Default is today's month.
17 * @option Number year The year to render. Default is today's year.
18 * @option Function renderCallback A reference to a function that is called as each cell is rendered and which can add classes and event listeners to the created nodes. Default is no callback.
19 * @option Number showHeader Whether or not to show the header row, possible values are: $.dpConst.SHOW_HEADER_NONE (no header), $.dpConst.SHOW_HEADER_SHORT (first letter of each day) and $.dpConst.SHOW_HEADER_LONG (full name of each day). Default is $.dpConst.SHOW_HEADER_SHORT.
20 * @option String hoverClass The class to attach to each cell when you hover over it (to allow you to use hover effects in IE6 which doesn't support the :hover pseudo-class on elements other than links). Default is dp-hover. Pass false if you don't want a hover class.
21 * @type jQuery
22 * @name renderCalendar
23 * @cat plugins/datePicker
24 * @author Kelvin Luck (http://www.kelvinluck.com/)
25 *
26 * @example $('#calendar-me').renderCalendar({month:0, year:2007});
27 * @desc Renders a calendar displaying January 2007 into the element with an id of calendar-me.
28 *
29 * @example
30 * var testCallback = function($td, thisDate, month, year)
31 * {
32 * if ($td.is('.current-month') && thisDate.getDay() == 4) {
33 * var d = thisDate.getDate();
34 * $td.bind(
35 * 'click',
36 * function()
37 * {
38 * alert('You clicked on ' + d + '/' + (Number(month)+1) + '/' + year);
39 * }
40 * ).addClass('thursday');
41 * } else if (thisDate.getDay() == 5) {
42 * $td.html('Friday the ' + $td.html() + 'th');
43 * }
44 * }
45 * $('#calendar-me').renderCalendar({month:0, year:2007, renderCallback:testCallback});
46 *
47 * @desc Renders a calendar displaying January 2007 into the element with an id of calendar-me. Every Thursday in the current month has a class of "thursday" applied to it, is clickable and shows an alert when clicked. Every Friday on the calendar has the number inside replaced with text.
48 **/
49 renderCalendar : function(s)
50 {
51 var dc = function(a)
52 {
53 return document.createElement(a);
54 };
56 s = $.extend({}, $.fn.datePicker.defaults, s);
58 if (s.showHeader != $.dpConst.SHOW_HEADER_NONE) {
59 var headRow = $(dc('tr'));
60 for (var i=Date.firstDayOfWeek; i<Date.firstDayOfWeek+7; i++) {
61 var weekday = i%7;
62 var day = Date.dayNames[weekday];
63 headRow.append(
64 jQuery(dc('th')).attr({'scope':'col', 'abbr':day, 'title':day, 'class':(weekday == 0 || weekday == 6 ? 'weekend' : 'weekday')}).html(s.showHeader == $.dpConst.SHOW_HEADER_SHORT ? day.substr(0, 1) : day)
65 );
66 }
67 };
69 var calendarTable = $(dc('table'))
70 .attr(
71 {
72 'cellspacing':2
73 }
74 )
75 .addClass('jCalendar')
76 .append(
77 (s.showHeader != $.dpConst.SHOW_HEADER_NONE ?
78 $(dc('thead'))
79 .append(headRow)
80 :
81 dc('thead')
82 )
83 );
84 var tbody = $(dc('tbody'));
86 var today = (new Date()).zeroTime();
87 today.setHours(12);
89 var month = s.month == undefined ? today.getMonth() : s.month;
90 var year = s.year || today.getFullYear();
92 var currentDate = (new Date(year, month, 1, 12, 0, 0));
95 var firstDayOffset = Date.firstDayOfWeek - currentDate.getDay() + 1;
96 if (firstDayOffset > 1) firstDayOffset -= 7;
97 var weeksToDraw = Math.ceil(( (-1*firstDayOffset+1) + currentDate.getDaysInMonth() ) /7);
98 currentDate.addDays(firstDayOffset-1);
100 var doHover = function(firstDayInBounds)
101 {
102 return function()
103 {
104 if (s.hoverClass) {
105 var $this = $(this);
106 if (!s.selectWeek) {
107 $this.addClass(s.hoverClass);
108 } else if (firstDayInBounds && !$this.is('.disabled')) {
109 $this.parent().addClass('activeWeekHover');
110 }
111 }
112 }
113 };
114 var unHover = function()
115 {
116 if (s.hoverClass) {
117 var $this = $(this);
118 $this.removeClass(s.hoverClass);
119 $this.parent().removeClass('activeWeekHover');
120 }
121 };
123 var w = 0;
124 while (w++<weeksToDraw) {
125 var r = jQuery(dc('tr'));
126 var firstDayInBounds = s.dpController ? currentDate > s.dpController.startDate : false;
127 for (var i=0; i<7; i++) {
128 var thisMonth = currentDate.getMonth() == month;
129 var d = $(dc('td'))
130 .text(currentDate.getDate() + '')
131 .addClass((thisMonth ? 'current-month ' : 'other-month ') +
132 (currentDate.isWeekend() ? 'weekend ' : 'weekday ') +
133 (thisMonth && currentDate.getTime() == today.getTime() ? 'today ' : '')
134 )
135 .data('datePickerDate', currentDate.asString())
136 .hover(doHover(firstDayInBounds), unHover)
137 ;
138 r.append(d);
139 if (s.renderCallback) {
140 s.renderCallback(d, currentDate, month, year);
141 }
142 // addDays(1) fails in some locales due to daylight savings. See issue 39.
143 //currentDate.addDays(1);
144 // set the time to midday to avoid any weird timezone issues??
145 currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()+1, 12, 0, 0);
146 }
147 tbody.append(r);
148 }
149 calendarTable.append(tbody);
151 return this.each(
152 function()
153 {
154 $(this).empty().append(calendarTable);
155 }
156 );
157 },
158 /**
159 * Create a datePicker associated with each of the matched elements.
160 *
161 * The matched element will receive a few custom events with the following signatures:
162 *
163 * dateSelected(event, date, $td, status)
164 * Triggered when a date is selected. event is a reference to the event, date is the Date selected, $td is a jquery object wrapped around the TD that was clicked on and status is whether the date was selected (true) or deselected (false)
165 *
166 * dpClosed(event, selected)
167 * Triggered when the date picker is closed. event is a reference to the event and selected is an Array containing Date objects.
168 *
169 * dpMonthChanged(event, displayedMonth, displayedYear)
170 * Triggered when the month of the popped up calendar is changed. event is a reference to the event, displayedMonth is the number of the month now displayed (zero based) and displayedYear is the year of the month.
171 *
172 * dpDisplayed(event, $datePickerDiv)
173 * Triggered when the date picker is created. $datePickerDiv is the div containing the date picker. Use this event to add custom content/ listeners to the popped up date picker.
174 *
175 * @param Object s (optional) Customize your date pickers.
176 * @option Number month The month to render when the date picker is opened (NOTE that months are zero based). Default is today's month.
177 * @option Number year The year to render when the date picker is opened. Default is today's year.
178 * @option String|Date startDate The first date date can be selected.
179 * @option String|Date endDate The last date that can be selected.
180 * @option Boolean inline Whether to create the datePicker as inline (e.g. always on the page) or as a model popup. Default is false (== modal popup)
181 * @option Boolean createButton Whether to create a .dp-choose-date anchor directly after the matched element which when clicked will trigger the showing of the date picker. Default is true.
182 * @option Boolean showYearNavigation Whether to display buttons which allow the user to navigate through the months a year at a time. Default is true.
183 * @option Boolean closeOnSelect Whether to close the date picker when a date is selected. Default is true.
184 * @option Boolean displayClose Whether to create a "Close" button within the date picker popup. Default is false.
185 * @option Boolean selectMultiple Whether a user should be able to select multiple dates with this date picker. Default is false.
186 * @option Number numSelectable The maximum number of dates that can be selected where selectMultiple is true. Default is a very high number.
187 * @option Boolean clickInput If the matched element is an input type="text" and this option is true then clicking on the input will cause the date picker to appear.
188 * @option Boolean rememberViewedMonth Whether the datePicker should remember the last viewed month and open on it. If false then the date picker will always open with the month for the first selected date visible.
189 * @option Boolean selectWeek Whether to select a complete week at a time...
190 * @option Number verticalPosition The vertical alignment of the popped up date picker to the matched element. One of $.dpConst.POS_TOP and $.dpConst.POS_BOTTOM. Default is $.dpConst.POS_TOP.
191 * @option Number horizontalPosition The horizontal alignment of the popped up date picker to the matched element. One of $.dpConst.POS_LEFT and $.dpConst.POS_RIGHT.
192 * @option Number verticalOffset The number of pixels offset from the defined verticalPosition of this date picker that it should pop up in. Default in 0.
193 * @option Number horizontalOffset The number of pixels offset from the defined horizontalPosition of this date picker that it should pop up in. Default in 0.
194 * @option (Function|Array) renderCallback A reference to a function (or an array of separate functions) that is called as each cell is rendered and which can add classes and event listeners to the created nodes. Each callback function will receive four arguments; a jquery object wrapping the created TD, a Date object containing the date this TD represents, a number giving the currently rendered month and a number giving the currently rendered year. Default is no callback.
195 * @option String hoverClass The class to attach to each cell when you hover over it (to allow you to use hover effects in IE6 which doesn't support the :hover pseudo-class on elements other than links). Default is dp-hover. Pass false if you don't want a hover class.
196 * @option String autoFocusNextInput Whether focus should be passed onto the next input in the form (true) or remain on this input (false) when a date is selected and the calendar closes
197 * @type jQuery
198 * @name datePicker
199 * @cat plugins/datePicker
200 * @author Kelvin Luck (http://www.kelvinluck.com/)
201 *
202 * @example $('input.date-picker').datePicker();
203 * @desc Creates a date picker button next to all matched input elements. When the button is clicked on the value of the selected date will be placed in the corresponding input (formatted according to Date.format).
204 *
205 * @example demo/index.html
206 * @desc See the projects homepage for many more complex examples...
207 **/
208 datePicker : function(s)
209 {
210 if (!$.event._dpCache) $.event._dpCache = [];
212 // initialise the date picker controller with the relevant settings...
213 s = $.extend({}, $.fn.datePicker.defaults, s);
215 return this.each(
216 function()
217 {
218 var $this = $(this);
219 var alreadyExists = true;
221 if (!this._dpId) {
222 this._dpId = $.event.guid++;
223 $.event._dpCache[this._dpId] = new DatePicker(this);
224 alreadyExists = false;
225 }
227 if (s.inline) {
228 s.createButton = false;
229 s.displayClose = false;
230 s.closeOnSelect = false;
231 $this.empty();
232 }
234 var controller = $.event._dpCache[this._dpId];
236 controller.init(s);
238 if (!alreadyExists && s.createButton) {
239 // create it!
240 controller.button = $('<a href="#" class="dp-choose-date" title="' + $.dpText.TEXT_CHOOSE_DATE + '">' + $.dpText.TEXT_CHOOSE_DATE + '</a>')
241 .bind(
242 'click',
243 function()
244 {
245 $this.dpDisplay(this);
246 this.blur();
247 return false;
248 }
249 );
250 $this.after(controller.button);
251 }
253 if (!alreadyExists && $this.is(':text')) {
254 $this
255 .bind(
256 'dateSelected',
257 function(e, selectedDate, $td)
258 {
259 this.value = selectedDate.asString();
260 }
261 ).bind(
262 'change',
263 function()
264 {
265 if (this.value == '') {
266 controller.clearSelected();
267 } else {
268 var d = Date.fromString(this.value);
269 if (d) {
270 controller.setSelected(d, true, true);
271 }
272 }
273 }
274 );
275 if (s.clickInput) {
276 $this.bind(
277 'click',
278 function()
279 {
280 // The change event doesn't happen until the input loses focus so we need to manually trigger it...
281 $this.trigger('change');
282 $this.dpDisplay();
283 }
284 );
285 }
286 var d = Date.fromString(this.value);
287 if (this.value != '' && d) {
288 controller.setSelected(d, true, true);
289 }
290 }
292 $this.addClass('dp-applied');
294 }
295 )
296 },
297 /**
298 * Disables or enables this date picker
299 *
300 * @param Boolean s Whether to disable (true) or enable (false) this datePicker
301 * @type jQuery
302 * @name dpSetDisabled
303 * @cat plugins/datePicker
304 * @author Kelvin Luck (http://www.kelvinluck.com/)
305 *
306 * @example $('.date-picker').datePicker();
307 * $('.date-picker').dpSetDisabled(true);
308 * @desc Prevents this date picker from displaying and adds a class of dp-disabled to it (and it's associated button if it has one) for styling purposes. If the matched element is an input field then it will also set the disabled attribute to stop people directly editing the field.
309 **/
310 dpSetDisabled : function(s)
311 {
312 return _w.call(this, 'setDisabled', s);
313 },
314 /**
315 * Updates the first selectable date for any date pickers on any matched elements.
316 *
317 * @param String|Date d A Date object or string representing the first selectable date (formatted according to Date.format).
318 * @type jQuery
319 * @name dpSetStartDate
320 * @cat plugins/datePicker
321 * @author Kelvin Luck (http://www.kelvinluck.com/)
322 *
323 * @example $('.date-picker').datePicker();
324 * $('.date-picker').dpSetStartDate('01/01/2000');
325 * @desc Creates a date picker associated with all elements with a class of "date-picker" then sets the first selectable date for each of these to the first day of the millenium.
326 **/
327 dpSetStartDate : function(d)
328 {
329 return _w.call(this, 'setStartDate', d);
330 },
331 /**
332 * Updates the last selectable date for any date pickers on any matched elements.
333 *
334 * @param String|Date d A Date object or string representing the last selectable date (formatted according to Date.format).
335 * @type jQuery
336 * @name dpSetEndDate
337 * @cat plugins/datePicker
338 * @author Kelvin Luck (http://www.kelvinluck.com/)
339 *
340 * @example $('.date-picker').datePicker();
341 * $('.date-picker').dpSetEndDate('01/01/2010');
342 * @desc Creates a date picker associated with all elements with a class of "date-picker" then sets the last selectable date for each of these to the first Janurary 2010.
343 **/
344 dpSetEndDate : function(d)
345 {
346 return _w.call(this, 'setEndDate', d);
347 },
348 /**
349 * Gets a list of Dates currently selected by this datePicker. This will be an empty array if no dates are currently selected or NULL if there is no datePicker associated with the matched element.
350 *
351 * @type Array
352 * @name dpGetSelected
353 * @cat plugins/datePicker
354 * @author Kelvin Luck (http://www.kelvinluck.com/)
355 *
356 * @example $('.date-picker').datePicker();
357 * alert($('.date-picker').dpGetSelected());
358 * @desc Will alert an empty array (as nothing is selected yet)
359 **/
360 dpGetSelected : function()
361 {
362 var c = _getController(this[0]);
363 if (c) {
364 return c.getSelected();
365 }
366 return null;
367 },
368 /**
369 * Selects or deselects a date on any matched element's date pickers. Deselcting is only useful on date pickers where selectMultiple==true. Selecting will only work if the passed date is within the startDate and endDate boundries for a given date picker.
370 *
371 * @param String|Date d A Date object or string representing the date you want to select (formatted according to Date.format).
372 * @param Boolean v Whether you want to select (true) or deselect (false) this date. Optional - default = true.
373 * @param Boolean m Whether you want the date picker to open up on the month of this date when it is next opened. Optional - default = true.
374 * @param Boolean e Whether you want the date picker to dispatch events related to this change of selection. Optional - default = true.
375 * @type jQuery
376 * @name dpSetSelected
377 * @cat plugins/datePicker
378 * @author Kelvin Luck (http://www.kelvinluck.com/)
379 *
380 * @example $('.date-picker').datePicker();
381 * $('.date-picker').dpSetSelected('01/01/2010');
382 * @desc Creates a date picker associated with all elements with a class of "date-picker" then sets the selected date on these date pickers to the first Janurary 2010. When the date picker is next opened it will display Janurary 2010.
383 **/
384 dpSetSelected : function(d, v, m, e)
385 {
386 if (v == undefined) v=true;
387 if (m == undefined) m=true;
388 if (e == undefined) e=true;
389 return _w.call(this, 'setSelected', Date.fromString(d), v, m, e);
390 },
391 /**
392 * Sets the month that will be displayed when the date picker is next opened. If the passed month is before startDate then the month containing startDate will be displayed instead. If the passed month is after endDate then the month containing the endDate will be displayed instead.
393 *
394 * @param Number m The month you want the date picker to display. Optional - defaults to the currently displayed month.
395 * @param Number y The year you want the date picker to display. Optional - defaults to the currently displayed year.
396 * @type jQuery
397 * @name dpSetDisplayedMonth
398 * @cat plugins/datePicker
399 * @author Kelvin Luck (http://www.kelvinluck.com/)
400 *
401 * @example $('.date-picker').datePicker();
402 * $('.date-picker').dpSetDisplayedMonth(10, 2008);
403 * @desc Creates a date picker associated with all elements with a class of "date-picker" then sets the selected date on these date pickers to the first Janurary 2010. When the date picker is next opened it will display Janurary 2010.
404 **/
405 dpSetDisplayedMonth : function(m, y)
406 {
407 return _w.call(this, 'setDisplayedMonth', Number(m), Number(y), true);
408 },
409 /**
410 * Displays the date picker associated with the matched elements. Since only one date picker can be displayed at once then the date picker associated with the last matched element will be the one that is displayed.
411 *
412 * @param HTMLElement e An element that you want the date picker to pop up relative in position to. Optional - default behaviour is to pop up next to the element associated with this date picker.
413 * @type jQuery
414 * @name dpDisplay
415 * @cat plugins/datePicker
416 * @author Kelvin Luck (http://www.kelvinluck.com/)
417 *
418 * @example $('#date-picker').datePicker();
419 * $('#date-picker').dpDisplay();
420 * @desc Creates a date picker associated with the element with an id of date-picker and then causes it to pop up.
421 **/
422 dpDisplay : function(e)
423 {
424 return _w.call(this, 'display', e);
425 },
426 /**
427 * Sets a function or array of functions that is called when each TD of the date picker popup is rendered to the page
428 *
429 * @param (Function|Array) a A function or an array of functions that are called when each td is rendered. Each function will receive four arguments; a jquery object wrapping the created TD, a Date object containing the date this TD represents, a number giving the currently rendered month and a number giving the currently rendered year.
430 * @type jQuery
431 * @name dpSetRenderCallback
432 * @cat plugins/datePicker
433 * @author Kelvin Luck (http://www.kelvinluck.com/)
434 *
435 * @example $('#date-picker').datePicker();
436 * $('#date-picker').dpSetRenderCallback(function($td, thisDate, month, year)
437 * {
438 * // do stuff as each td is rendered dependant on the date in the td and the displayed month and year
439 * });
440 * @desc Creates a date picker associated with the element with an id of date-picker and then creates a function which is called as each td is rendered when this date picker is displayed.
441 **/
442 dpSetRenderCallback : function(a)
443 {
444 return _w.call(this, 'setRenderCallback', a);
445 },
446 /**
447 * Sets the position that the datePicker will pop up (relative to it's associated element)
448 *
449 * @param Number v The vertical alignment of the created date picker to it's associated element. Possible values are $.dpConst.POS_TOP and $.dpConst.POS_BOTTOM
450 * @param Number h The horizontal alignment of the created date picker to it's associated element. Possible values are $.dpConst.POS_LEFT and $.dpConst.POS_RIGHT
451 * @type jQuery
452 * @name dpSetPosition
453 * @cat plugins/datePicker
454 * @author Kelvin Luck (http://www.kelvinluck.com/)
455 *
456 * @example $('#date-picker').datePicker();
457 * $('#date-picker').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_RIGHT);
458 * @desc Creates a date picker associated with the element with an id of date-picker and makes it so that when this date picker pops up it will be bottom and right aligned to the #date-picker element.
459 **/
460 dpSetPosition : function(v, h)
461 {
462 return _w.call(this, 'setPosition', v, h);
463 },
464 /**
465 * Sets the offset that the popped up date picker will have from it's default position relative to it's associated element (as set by dpSetPosition)
466 *
467 * @param Number v The vertical offset of the created date picker.
468 * @param Number h The horizontal offset of the created date picker.
469 * @type jQuery
470 * @name dpSetOffset
471 * @cat plugins/datePicker
472 * @author Kelvin Luck (http://www.kelvinluck.com/)
473 *
474 * @example $('#date-picker').datePicker();
475 * $('#date-picker').dpSetOffset(-20, 200);
476 * @desc Creates a date picker associated with the element with an id of date-picker and makes it so that when this date picker pops up it will be 20 pixels above and 200 pixels to the right of it's default position.
477 **/
478 dpSetOffset : function(v, h)
479 {
480 return _w.call(this, 'setOffset', v, h);
481 },
482 /**
483 * Closes the open date picker associated with this element.
484 *
485 * @type jQuery
486 * @name dpClose
487 * @cat plugins/datePicker
488 * @author Kelvin Luck (http://www.kelvinluck.com/)
489 *
490 * @example $('.date-pick')
491 * .datePicker()
492 * .bind(
493 * 'focus',
494 * function()
495 * {
496 * $(this).dpDisplay();
497 * }
498 * ).bind(
499 * 'blur',
500 * function()
501 * {
502 * $(this).dpClose();
503 * }
504 * );
505 **/
506 dpClose : function()
507 {
508 return _w.call(this, '_closeCalendar', false, this[0]);
509 },
510 /**
511 * Rerenders the date picker's current month (for use with inline calendars and renderCallbacks).
512 *
513 * @type jQuery
514 * @name dpRerenderCalendar
515 * @cat plugins/datePicker
516 * @author Kelvin Luck (http://www.kelvinluck.com/)
517 *
518 **/
519 dpRerenderCalendar : function()
520 {
521 return _w.call(this, '_rerenderCalendar');
522 },
523 // private function called on unload to clean up any expandos etc and prevent memory links...
524 _dpDestroy : function()
525 {
526 // TODO - implement this?
527 }
528 });
530 // private internal function to cut down on the amount of code needed where we forward
531 // dp* methods on the jQuery object on to the relevant DatePicker controllers...
532 var _w = function(f, a1, a2, a3, a4)
533 {
534 return this.each(
535 function()
536 {
537 var c = _getController(this);
538 if (c) {
539 c[f](a1, a2, a3, a4);
540 }
541 }
542 );
543 };
545 function DatePicker(ele)
546 {
547 this.ele = ele;
549 // initial values...
550 this.displayedMonth = null;
551 this.displayedYear = null;
552 this.startDate = null;
553 this.endDate = null;
554 this.showYearNavigation = null;
555 this.closeOnSelect = null;
556 this.displayClose = null;
557 this.rememberViewedMonth= null;
558 this.selectMultiple = null;
559 this.numSelectable = null;
560 this.numSelected = null;
561 this.verticalPosition = null;
562 this.horizontalPosition = null;
563 this.verticalOffset = null;
564 this.horizontalOffset = null;
565 this.button = null;
566 this.renderCallback = [];
567 this.selectedDates = {};
568 this.inline = null;
569 this.context = '#dp-popup';
570 this.settings = {};
571 };
572 $.extend(
573 DatePicker.prototype,
574 {
575 init : function(s)
576 {
577 this.setStartDate(s.startDate);
578 this.setEndDate(s.endDate);
579 this.setDisplayedMonth(Number(s.month), Number(s.year));
580 this.setRenderCallback(s.renderCallback);
581 this.showYearNavigation = s.showYearNavigation;
582 this.closeOnSelect = s.closeOnSelect;
583 this.displayClose = s.displayClose;
584 this.rememberViewedMonth = s.rememberViewedMonth;
585 this.selectMultiple = s.selectMultiple;
586 this.numSelectable = s.selectMultiple ? s.numSelectable : 1;
587 this.numSelected = 0;
588 this.verticalPosition = s.verticalPosition;
589 this.horizontalPosition = s.horizontalPosition;
590 this.hoverClass = s.hoverClass;
591 this.setOffset(s.verticalOffset, s.horizontalOffset);
592 this.inline = s.inline;
593 this.settings = s;
594 if (this.inline) {
595 this.context = this.ele;
596 this.display();
597 }
598 },
599 setStartDate : function(d)
600 {
601 if (d) {
602 if (d instanceof Date) {
603 this.startDate = d;
604 } else {
605 this.startDate = Date.fromString(d);
606 }
607 }
608 if (!this.startDate) {
609 this.startDate = (new Date()).zeroTime();
610 }
611 this.setDisplayedMonth(this.displayedMonth, this.displayedYear);
612 },
613 setEndDate : function(d)
614 {
615 if (d) {
616 if (d instanceof Date) {
617 this.endDate = d;
618 } else {
619 this.endDate = Date.fromString(d);
620 }
621 }
622 if (!this.endDate) {
623 this.endDate = (new Date('12/31/2999')); // using the JS Date.parse function which expects mm/dd/yyyy
624 }
625 if (this.endDate.getTime() < this.startDate.getTime()) {
626 this.endDate = this.startDate;
627 }
628 this.setDisplayedMonth(this.displayedMonth, this.displayedYear);
629 },
630 setPosition : function(v, h)
631 {
632 this.verticalPosition = v;
633 this.horizontalPosition = h;
634 },
635 setOffset : function(v, h)
636 {
637 this.verticalOffset = parseInt(v) || 0;
638 this.horizontalOffset = parseInt(h) || 0;
639 },
640 setDisabled : function(s)
641 {
642 $e = $(this.ele);
643 $e[s ? 'addClass' : 'removeClass']('dp-disabled');
644 if (this.button) {
645 $but = $(this.button);
646 $but[s ? 'addClass' : 'removeClass']('dp-disabled');
647 $but.attr('title', s ? '' : $.dpText.TEXT_CHOOSE_DATE);
648 }
649 if ($e.is(':text')) {
650 $e.attr('disabled', s ? 'disabled' : '');
651 }
652 },
653 setDisplayedMonth : function(m, y, rerender)
654 {
655 if (this.startDate == undefined || this.endDate == undefined) {
656 return;
657 }
658 var s = new Date(this.startDate.getTime());
659 s.setDate(1);
660 var e = new Date(this.endDate.getTime());
661 e.setDate(1);
663 var t;
664 if ((!m && !y) || (isNaN(m) && isNaN(y))) {
665 // no month or year passed - default to current month
666 t = new Date().zeroTime();
667 t.setDate(1);
668 } else if (isNaN(m)) {
669 // just year passed in - presume we want the displayedMonth
670 t = new Date(y, this.displayedMonth, 1);
671 } else if (isNaN(y)) {
672 // just month passed in - presume we want the displayedYear
673 t = new Date(this.displayedYear, m, 1);
674 } else {
675 // year and month passed in - that's the date we want!
676 t = new Date(y, m, 1)
677 }
678 // check if the desired date is within the range of our defined startDate and endDate
679 if (t.getTime() < s.getTime()) {
680 t = s;
681 } else if (t.getTime() > e.getTime()) {
682 t = e;
683 }
684 var oldMonth = this.displayedMonth;
685 var oldYear = this.displayedYear;
686 this.displayedMonth = t.getMonth();
687 this.displayedYear = t.getFullYear();
689 if (rerender && (this.displayedMonth != oldMonth || this.displayedYear != oldYear))
690 {
691 this._rerenderCalendar();
692 $(this.ele).trigger('dpMonthChanged', [this.displayedMonth, this.displayedYear]);
693 }
694 },
695 setSelected : function(d, v, moveToMonth, dispatchEvents)
696 {
697 if (d < this.startDate || d.zeroTime() > this.endDate.zeroTime()) {
698 // Don't allow people to select dates outside range...
699 return;
700 }
701 var s = this.settings;
702 if (s.selectWeek)
703 {
704 d = d.addDays(- (d.getDay() - Date.firstDayOfWeek + 7) % 7);
705 if (d < this.startDate) // The first day of this week is before the start date so is unselectable...
706 {
707 return;
708 }
709 }
710 if (v == this.isSelected(d)) // this date is already un/selected
711 {
712 return;
713 }
714 if (this.selectMultiple == false) {
715 this.clearSelected();
716 } else if (v && this.numSelected == this.numSelectable) {
717 // can't select any more dates...
718 return;
719 }
720 if (moveToMonth && (this.displayedMonth != d.getMonth() || this.displayedYear != d.getFullYear())) {
721 this.setDisplayedMonth(d.getMonth(), d.getFullYear(), true);
722 }
723 this.selectedDates[d.asString()] = v;
724 this.numSelected += v ? 1 : -1;
725 var selectorString = 'td.' + (d.getMonth() == this.displayedMonth ? 'current-month' : 'other-month');
726 var $td;
727 $(selectorString, this.context).each(
728 function()
729 {
730 if ($(this).data('datePickerDate') == d.asString()) {
731 $td = $(this);
732 if (s.selectWeek)
733 {
734 $td.parent()[v ? 'addClass' : 'removeClass']('selectedWeek');
735 }
736 $td[v ? 'addClass' : 'removeClass']('selected');
737 }
738 }
739 );
740 $('td', this.context).not('.selected')[this.selectMultiple && this.numSelected == this.numSelectable ? 'addClass' : 'removeClass']('unselectable');
742 if (dispatchEvents)
743 {
744 var s = this.isSelected(d);
745 $e = $(this.ele);
746 var dClone = Date.fromString(d.asString());
747 $e.trigger('dateSelected', [dClone, $td, s]);
748 $e.trigger('change');
749 }
750 },
751 isSelected : function(d)
752 {
753 return this.selectedDates[d.asString()];
754 },
755 getSelected : function()
756 {
757 var r = [];
758 for(var s in this.selectedDates) {
759 if (this.selectedDates[s] == true) {
760 r.push(Date.fromString(s));
761 }
762 }
763 return r;
764 },
765 clearSelected : function()
766 {
767 this.selectedDates = {};
768 this.numSelected = 0;
769 $('td.selected', this.context).removeClass('selected').parent().removeClass('selectedWeek');
770 },
771 display : function(eleAlignTo)
772 {
773 if ($(this.ele).is('.dp-disabled')) return;
775 eleAlignTo = eleAlignTo || this.ele;
776 var c = this;
777 var $ele = $(eleAlignTo);
778 var eleOffset = $ele.offset();
780 var $createIn;
781 var attrs;
782 var attrsCalendarHolder;
783 var cssRules;
785 if (c.inline) {
786 $createIn = $(this.ele);
787 attrs = {
788 'id' : 'calendar-' + this.ele._dpId,
789 'class' : 'dp-popup dp-popup-inline'
790 };
792 $('.dp-popup', $createIn).remove();
793 cssRules = {
794 };
795 } else {
796 $createIn = $('body');
797 attrs = {
798 'id' : 'dp-popup',
799 'class' : 'dp-popup'
800 };
801 cssRules = {
802 'top' : eleOffset.top + c.verticalOffset,
803 'left' : eleOffset.left + c.horizontalOffset
804 };
806 var _checkMouse = function(e)
807 {
808 var el = e.target;
809 var cal = $('#dp-popup')[0];
811 while (true){
812 if (el == cal) {
813 return true;
814 } else if (el == document) {
815 c._closeCalendar();
816 return false;
817 } else {
818 el = $(el).parent()[0];
819 }
820 }
821 };
822 this._checkMouse = _checkMouse;
824 c._closeCalendar(true);
825 $(document).bind(
826 'keydown.datepicker',
827 function(event)
828 {
829 if (event.keyCode == 27) {
830 c._closeCalendar();
831 }
832 }
833 );
834 }
836 if (!c.rememberViewedMonth)
837 {
838 var selectedDate = this.getSelected()[0];
839 if (selectedDate) {
840 selectedDate = new Date(selectedDate);
841 this.setDisplayedMonth(selectedDate.getMonth(), selectedDate.getFullYear(), false);
842 }
843 }
845 $createIn
846 .append(
847 $('<div></div>')
848 .attr(attrs)
849 .css(cssRules)
850 .append(
851 // $('<a href="#" class="selecteee">aaa</a>'),
852 $('<h2></h2>'),
853 $('<div class="dp-nav-prev"></div>')
854 .append(
855 $('<a class="dp-nav-prev-year" href="#" title="' + $.dpText.TEXT_PREV_YEAR + '"><<</a>')
856 .bind(
857 'click',
858 function()
859 {
860 return c._displayNewMonth.call(c, this, 0, -1);
861 }
862 ),
863 $('<a class="dp-nav-prev-month" href="#" title="' + $.dpText.TEXT_PREV_MONTH + '"><</a>')
864 .bind(
865 'click',
866 function()
867 {
868 return c._displayNewMonth.call(c, this, -1, 0);
869 }
870 )
871 ),
872 $('<div class="dp-nav-next"></div>')
873 .append(
874 $('<a class="dp-nav-next-year" href="#" title="' + $.dpText.TEXT_NEXT_YEAR + '">>></a>')
875 .bind(
876 'click',
877 function()
878 {
879 return c._displayNewMonth.call(c, this, 0, 1);
880 }
881 ),
882 $('<a class="dp-nav-next-month" href="#" title="' + $.dpText.TEXT_NEXT_MONTH + '">></a>')
883 .bind(
884 'click',
885 function()
886 {
887 return c._displayNewMonth.call(c, this, 1, 0);
888 }
889 )
890 ),
891 $('<div class="dp-calendar"></div>')
892 )
893 .bgIframe()
894 );
896 var $pop = this.inline ? $('.dp-popup', this.context) : $('#dp-popup');
898 if (this.showYearNavigation == false) {
899 $('.dp-nav-prev-year, .dp-nav-next-year', c.context).css('display', 'none');
900 }
901 if (this.displayClose) {
902 $pop.append(
903 $('<a href="#" id="dp-close">' + $.dpText.TEXT_CLOSE + '</a>')
904 .bind(
905 'click',
906 function()
907 {
908 c._closeCalendar();
909 return false;
910 }
911 )
912 );
913 }
914 c._renderCalendar();
916 $(this.ele).trigger('dpDisplayed', $pop);
918 if (!c.inline) {
919 if (this.verticalPosition == $.dpConst.POS_BOTTOM) {
920 $pop.css('top', eleOffset.top + $ele.height() - $pop.height() + c.verticalOffset);
921 }
922 if (this.horizontalPosition == $.dpConst.POS_RIGHT) {
923 $pop.css('left', eleOffset.left + $ele.width() - $pop.width() + c.horizontalOffset);
924 }
925 // $('.selectee', this.context).focus();
926 $(document).bind('mousedown.datepicker', this._checkMouse);
927 }
929 },
930 setRenderCallback : function(a)
931 {
932 if (a == null) return;
933 if (a && typeof(a) == 'function') {
934 a = [a];
935 }
936 this.renderCallback = this.renderCallback.concat(a);
937 },
938 cellRender : function ($td, thisDate, month, year) {
939 var c = this.dpController;
940 var d = new Date(thisDate.getTime());
942 // add our click handlers to deal with it when the days are clicked...
944 $td.bind(
945 'click',
946 function()
947 {
948 var $this = $(this);
949 if (!$this.is('.disabled')) {
950 c.setSelected(d, !$this.is('.selected') || !c.selectMultiple, false, true);
951 if (c.closeOnSelect) {
952 // Focus the next input in the form…
953 if (c.settings.autoFocusNextInput) {
954 var ele = c.ele;
955 var found = false;
956 $(':input', ele.form).each(
957 function()
958 {
959 if (found) {
960 $(this).focus();
961 return false;
962 }
963 if (this == ele) {
964 found = true;
965 }
966 }
967 );
968 } else {
969 c.ele.focus();
970 }
971 c._closeCalendar();
972 }
973 }
974 }
975 );
976 if (c.isSelected(d)) {
977 $td.addClass('selected');
978 if (c.settings.selectWeek)
979 {
980 $td.parent().addClass('selectedWeek');
981 }
982 } else if (c.selectMultiple && c.numSelected == c.numSelectable) {
983 $td.addClass('unselectable');
984 }
986 },
987 _applyRenderCallbacks : function()
988 {
989 var c = this;
990 $('td', this.context).each(
991 function()
992 {
993 for (var i=0; i<c.renderCallback.length; i++) {
994 $td = $(this);
995 c.renderCallback[i].apply(this, [$td, Date.fromString($td.data('datePickerDate')), c.displayedMonth, c.displayedYear]);
996 }
997 }
998 );
999 return;
1000 },
1001 // ele is the clicked button - only proceed if it doesn't have the class disabled...
1002 // m and y are -1, 0 or 1 depending which direction we want to go in...
1003 _displayNewMonth : function(ele, m, y)
1004 {
1005 if (!$(ele).is('.disabled')) {
1006 this.setDisplayedMonth(this.displayedMonth + m, this.displayedYear + y, true);
1007 }
1008 ele.blur();
1009 return false;
1010 },
1011 _rerenderCalendar : function()
1012 {
1013 this._clearCalendar();
1014 this._renderCalendar();
1015 },
1016 _renderCalendar : function()
1017 {
1018 // set the title...
1019 $('h2', this.context).html((new Date(this.displayedYear, this.displayedMonth, 1)).asString($.dpText.HEADER_FORMAT));
1021 // render the calendar...
1022 $('.dp-calendar', this.context).renderCalendar(
1023 $.extend(
1024 {},
1025 this.settings,
1026 {
1027 month : this.displayedMonth,
1028 year : this.displayedYear,
1029 renderCallback : this.cellRender,
1030 dpController : this,
1031 hoverClass : this.hoverClass
1032 })
1033 );
1035 // update the status of the control buttons and disable dates before startDate or after endDate...
1036 // TODO: When should the year buttons be disabled? When you can't go forward a whole year from where you are or is that annoying?
1037 if (this.displayedYear == this.startDate.getFullYear() && this.displayedMonth == this.startDate.getMonth()) {
1038 $('.dp-nav-prev-year', this.context).addClass('disabled');
1039 $('.dp-nav-prev-month', this.context).addClass('disabled');
1040 $('.dp-calendar td.other-month', this.context).each(
1041 function()
1042 {
1043 var $this = $(this);
1044 if (Number($this.text()) > 20) {
1045 $this.addClass('disabled');
1046 }
1047 }
1048 );
1049 var d = this.startDate.getDate();
1050 $('.dp-calendar td.current-month', this.context).each(
1051 function()
1052 {
1053 var $this = $(this);
1054 if (Number($this.text()) < d) {
1055 $this.addClass('disabled');
1056 }
1057 }
1058 );
1059 } else {
1060 $('.dp-nav-prev-year', this.context).removeClass('disabled');
1061 $('.dp-nav-prev-month', this.context).removeClass('disabled');
1062 var d = this.startDate.getDate();
1063 if (d > 20) {
1064 // check if the startDate is last month as we might need to add some disabled classes...
1065 var st = this.startDate.getTime();
1066 var sd = new Date(st);
1067 sd.addMonths(1);
1068 if (this.displayedYear == sd.getFullYear() && this.displayedMonth == sd.getMonth()) {
1069 $('.dp-calendar td.other-month', this.context).each(
1070 function()
1071 {
1072 var $this = $(this);
1073 if (Date.fromString($this.data('datePickerDate')).getTime() < st) {
1074 $this.addClass('disabled');
1075 }
1076 }
1077 );
1078 }
1079 }
1080 }
1081 if (this.displayedYear == this.endDate.getFullYear() && this.displayedMonth == this.endDate.getMonth()) {
1082 $('.dp-nav-next-year', this.context).addClass('disabled');
1083 $('.dp-nav-next-month', this.context).addClass('disabled');
1084 $('.dp-calendar td.other-month', this.context).each(
1085 function()
1086 {
1087 var $this = $(this);
1088 if (Number($this.text()) < 14) {
1089 $this.addClass('disabled');
1090 }
1091 }
1092 );
1093 var d = this.endDate.getDate();
1094 $('.dp-calendar td.current-month', this.context).each(
1095 function()
1096 {
1097 var $this = $(this);
1098 if (Number($this.text()) > d) {
1099 $this.addClass('disabled');
1100 }
1101 }
1102 );
1103 } else {
1104 $('.dp-nav-next-year', this.context).removeClass('disabled');
1105 $('.dp-nav-next-month', this.context).removeClass('disabled');
1106 var d = this.endDate.getDate();
1107 if (d < 13) {
1108 // check if the endDate is next month as we might need to add some disabled classes...
1109 var ed = new Date(this.endDate.getTime());
1110 ed.addMonths(-1);
1111 if (this.displayedYear == ed.getFullYear() && this.displayedMonth == ed.getMonth()) {
1112 $('.dp-calendar td.other-month', this.context).each(
1113 function()
1114 {
1115 var $this = $(this);
1116 var cellDay = Number($this.text());
1117 if (cellDay < 13 && cellDay > d) {
1118 $this.addClass('disabled');
1119 }
1120 }
1121 );
1122 }
1123 }
1124 }
1125 this._applyRenderCallbacks();
1126 },
1127 _closeCalendar : function(programatic, ele)
1128 {
1129 if (!ele || ele == this.ele)
1130 {
1131 $(document).unbind('mousedown.datepicker');
1132 $(document).unbind('keydown.datepicker');
1133 this._clearCalendar();
1134 $('#dp-popup a').unbind();
1135 $('#dp-popup').empty().remove();
1136 if (!programatic) {
1137 $(this.ele).trigger('dpClosed', [this.getSelected()]);
1138 }
1139 }
1140 },
1141 // empties the current dp-calendar div and makes sure that all events are unbound
1142 // and expandos removed to avoid memory leaks...
1143 _clearCalendar : function()
1144 {
1145 // TODO.
1146 $('.dp-calendar td', this.context).unbind();
1147 $('.dp-calendar', this.context).empty();
1148 }
1149 }
1150 );
1152 // static constants
1153 $.dpConst = {
1154 SHOW_HEADER_NONE : 0,
1155 SHOW_HEADER_SHORT : 1,
1156 SHOW_HEADER_LONG : 2,
1157 POS_TOP : 0,
1158 POS_BOTTOM : 1,
1159 POS_LEFT : 0,
1160 POS_RIGHT : 1,
1161 DP_INTERNAL_FOCUS : 'dpInternalFocusTrigger'
1162 };
1163 // localisable text
1164 $.dpText = {
1165 TEXT_PREV_YEAR : 'Previous year',
1166 TEXT_PREV_MONTH : 'Previous month',
1167 TEXT_NEXT_YEAR : 'Next year',
1168 TEXT_NEXT_MONTH : 'Next month',
1169 TEXT_CLOSE : 'Close',
1170 TEXT_CHOOSE_DATE : 'Choose date',
1171 HEADER_FORMAT : 'mmmm yyyy'
1172 };
1173 // version
1174 $.dpVersion = '$Id$';
1176 $.fn.datePicker.defaults = {
1177 month : undefined,
1178 year : undefined,
1179 showHeader : $.dpConst.SHOW_HEADER_SHORT,
1180 startDate : undefined,
1181 endDate : undefined,
1182 inline : false,
1183 renderCallback : null,
1184 createButton : true,
1185 showYearNavigation : true,
1186 closeOnSelect : true,
1187 displayClose : false,
1188 selectMultiple : false,
1189 numSelectable : Number.MAX_VALUE,
1190 clickInput : false,
1191 rememberViewedMonth : true,
1192 selectWeek : false,
1193 verticalPosition : $.dpConst.POS_TOP,
1194 horizontalPosition : $.dpConst.POS_LEFT,
1195 verticalOffset : 0,
1196 horizontalOffset : 0,
1197 hoverClass : 'dp-hover',
1198 autoFocusNextInput : false
1199 };
1201 function _getController(ele)
1202 {
1203 if (ele._dpId) return $.event._dpCache[ele._dpId];
1204 return false;
1205 };
1207 // make it so that no error is thrown if bgIframe plugin isn't included (allows you to use conditional
1208 // comments to only include bgIframe where it is needed in IE without breaking this plugin).
1209 if ($.fn.bgIframe == undefined) {
1210 $.fn.bgIframe = function() {return this; };
1211 };
1214 // clean-up
1215 $(window)
1216 .bind('unload', function() {
1217 var els = $.event._dpCache || [];
1218 for (var i in els) {
1219 $(els[i].ele)._dpDestroy();
1220 }
1221 });
1224 })(jQuery);