2 * Copyright (c) 2008 Kelvin Luck (http://www.kelvinluck.com/)
\r
3 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
\r
4 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
\r
6 * $Id: jquery.datePicker.js 94 2010-01-25 02:25:27Z kelvin.luck $
\r
13 * Render a calendar table into any matched elements.
\r
15 * @param Object s (optional) Customize your calendars.
\r
16 * @option Number month The month to render (NOTE that months are zero based). Default is today's month.
\r
17 * @option Number year The year to render. Default is today's year.
\r
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.
\r
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.
\r
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.
\r
22 * @name renderCalendar
\r
23 * @cat plugins/datePicker
\r
24 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
26 * @example $('#calendar-me').renderCalendar({month:0, year:2007});
\r
27 * @desc Renders a calendar displaying January 2007 into the element with an id of calendar-me.
\r
30 * var testCallback = function($td, thisDate, month, year)
\r
32 * if ($td.is('.current-month') && thisDate.getDay() == 4) {
\r
33 * var d = thisDate.getDate();
\r
38 * alert('You clicked on ' + d + '/' + (Number(month)+1) + '/' + year);
\r
40 * ).addClass('thursday');
\r
41 * } else if (thisDate.getDay() == 5) {
\r
42 * $td.html('Friday the ' + $td.html() + 'th');
\r
45 * $('#calendar-me').renderCalendar({month:0, year:2007, renderCallback:testCallback});
\r
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.
\r
49 renderCalendar : function(s)
\r
51 var dc = function(a)
\r
53 return document.createElement(a);
\r
56 s = $.extend({}, $.fn.datePicker.defaults, s);
\r
58 if (s.showHeader != $.dpConst.SHOW_HEADER_NONE) {
\r
59 var headRow = $(dc('tr'));
\r
60 for (var i=Date.firstDayOfWeek; i<Date.firstDayOfWeek+7; i++) {
\r
62 var day = Date.dayNames[weekday];
\r
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)
\r
69 var calendarTable = $(dc('table'))
\r
75 .addClass('jCalendar')
\r
77 (s.showHeader != $.dpConst.SHOW_HEADER_NONE ?
\r
84 var tbody = $(dc('tbody'));
\r
86 var today = (new Date()).zeroTime();
89 var month = s.month == undefined ? today.getMonth() : s.month;
\r
90 var year = s.year || today.getFullYear();
\r
92 var currentDate = (new Date(year, month, 1, 12, 0, 0));
\r
95 var firstDayOffset = Date.firstDayOfWeek - currentDate.getDay() + 1;
\r
96 if (firstDayOffset > 1) firstDayOffset -= 7;
\r
97 var weeksToDraw = Math.ceil(( (-1*firstDayOffset+1) + currentDate.getDaysInMonth() ) /7);
\r
98 currentDate.addDays(firstDayOffset-1);
\r
100 var doHover = function(firstDayInBounds)
\r
104 if (s.hoverClass) {
\r
105 var $this = $(this);
\r
106 if (!s.selectWeek) {
\r
107 $this.addClass(s.hoverClass);
\r
108 } else if (firstDayInBounds && !$this.is('.disabled')) {
\r
109 $this.parent().addClass('activeWeekHover');
\r
114 var unHover = function()
\r
116 if (s.hoverClass) {
\r
117 var $this = $(this);
\r
118 $this.removeClass(s.hoverClass);
\r
119 $this.parent().removeClass('activeWeekHover');
\r
124 while (w++<weeksToDraw) {
\r
125 var r = jQuery(dc('tr'));
\r
126 var firstDayInBounds = s.dpController ? currentDate > s.dpController.startDate : false;
\r
127 for (var i=0; i<7; i++) {
\r
128 var thisMonth = currentDate.getMonth() == month;
\r
129 var d = $(dc('td'))
\r
130 .text(currentDate.getDate() + '')
\r
131 .addClass((thisMonth ? 'current-month ' : 'other-month ') +
\r
132 (currentDate.isWeekend() ? 'weekend ' : 'weekday ') +
\r
133 (thisMonth && currentDate.getTime() == today.getTime() ? 'today ' : '')
\r
135 .data('datePickerDate', currentDate.asString())
\r
136 .hover(doHover(firstDayInBounds), unHover)
\r
139 if (s.renderCallback) {
\r
140 s.renderCallback(d, currentDate, month, year);
\r
142 // addDays(1) fails in some locales due to daylight savings. See issue 39.
\r
143 //currentDate.addDays(1);
144 // set the time to midday to avoid any weird timezone issues??
\r
145 currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()+1, 12, 0, 0);
\r
149 calendarTable.append(tbody);
\r
154 $(this).empty().append(calendarTable);
\r
159 * Create a datePicker associated with each of the matched elements.
\r
161 * The matched element will receive a few custom events with the following signatures:
\r
163 * dateSelected(event, date, $td, status)
\r
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)
\r
166 * dpClosed(event, selected)
\r
167 * Triggered when the date picker is closed. event is a reference to the event and selected is an Array containing Date objects.
\r
169 * dpMonthChanged(event, displayedMonth, displayedYear)
\r
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.
\r
172 * dpDisplayed(event, $datePickerDiv)
\r
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.
\r
175 * @param Object s (optional) Customize your date pickers.
\r
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.
\r
177 * @option Number year The year to render when the date picker is opened. Default is today's year.
\r
178 * @option String startDate The first date date can be selected.
\r
179 * @option String endDate The last date that can be selected.
\r
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)
\r
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.
\r
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.
\r
183 * @option Boolean closeOnSelect Whether to close the date picker when a date is selected. Default is true.
\r
184 * @option Boolean displayClose Whether to create a "Close" button within the date picker popup. Default is false.
\r
185 * @option Boolean selectMultiple Whether a user should be able to select multiple dates with this date picker. Default is false.
\r
186 * @option Number numSelectable The maximum number of dates that can be selected where selectMultiple is true. Default is a very high number.
\r
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.
\r
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.
\r
189 * @option Boolean selectWeek Whether to select a complete week at a time...
\r
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.
\r
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.
\r
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.
\r
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.
\r
194 * @option (Function|Array) renderCallback A reference to a function (or an array of seperate 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.
\r
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.
\r
198 * @cat plugins/datePicker
\r
199 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
201 * @example $('input.date-picker').datePicker();
\r
202 * @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).
\r
204 * @example demo/index.html
\r
205 * @desc See the projects homepage for many more complex examples...
\r
207 datePicker : function(s)
\r
209 if (!$.event._dpCache) $.event._dpCache = [];
\r
211 // initialise the date picker controller with the relevant settings...
\r
212 s = $.extend({}, $.fn.datePicker.defaults, s);
\r
217 var $this = $(this);
\r
218 var alreadyExists = true;
\r
221 this._dpId = $.event.guid++;
\r
222 $.event._dpCache[this._dpId] = new DatePicker(this);
\r
223 alreadyExists = false;
\r
227 s.createButton = false;
\r
228 s.displayClose = false;
\r
229 s.closeOnSelect = false;
\r
233 var controller = $.event._dpCache[this._dpId];
\r
235 controller.init(s);
\r
237 if (!alreadyExists && s.createButton) {
\r
239 controller.button = $('<a href="#" class="dp-choose-date" title="' + $.dpText.TEXT_CHOOSE_DATE + '">' + $.dpText.TEXT_CHOOSE_DATE + '</a>')
\r
244 $this.dpDisplay(this);
\r
249 $this.after(controller.button);
\r
252 if (!alreadyExists && $this.is(':text')) {
\r
256 function(e, selectedDate, $td)
\r
258 this.value = selectedDate.asString();
\r
264 if (this.value == '') {
\r
265 controller.clearSelected();
\r
267 var d = Date.fromString(this.value);
\r
269 controller.setSelected(d, true, true);
\r
274 if (s.clickInput) {
\r
279 // The change event doesn't happen until the input loses focus so we need to manually trigger it...
\r
280 $this.trigger('change');
\r
285 var d = Date.fromString(this.value);
\r
286 if (this.value != '' && d) {
\r
287 controller.setSelected(d, true, true);
\r
291 $this.addClass('dp-applied');
\r
297 * Disables or enables this date picker
\r
299 * @param Boolean s Whether to disable (true) or enable (false) this datePicker
\r
301 * @name dpSetDisabled
\r
302 * @cat plugins/datePicker
\r
303 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
305 * @example $('.date-picker').datePicker();
\r
306 * $('.date-picker').dpSetDisabled(true);
\r
307 * @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.
\r
309 dpSetDisabled : function(s)
\r
311 return _w.call(this, 'setDisabled', s);
\r
314 * Updates the first selectable date for any date pickers on any matched elements.
\r
316 * @param String d A string representing the first selectable date (formatted according to Date.format).
\r
318 * @name dpSetStartDate
\r
319 * @cat plugins/datePicker
\r
320 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
322 * @example $('.date-picker').datePicker();
\r
323 * $('.date-picker').dpSetStartDate('01/01/2000');
\r
324 * @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.
\r
326 dpSetStartDate : function(d)
\r
328 return _w.call(this, 'setStartDate', d);
\r
331 * Updates the last selectable date for any date pickers on any matched elements.
\r
333 * @param String d A string representing the last selectable date (formatted according to Date.format).
\r
335 * @name dpSetEndDate
\r
336 * @cat plugins/datePicker
\r
337 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
339 * @example $('.date-picker').datePicker();
\r
340 * $('.date-picker').dpSetEndDate('01/01/2010');
\r
341 * @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.
\r
343 dpSetEndDate : function(d)
\r
345 return _w.call(this, 'setEndDate', d);
\r
348 * 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.
\r
351 * @name dpGetSelected
\r
352 * @cat plugins/datePicker
\r
353 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
355 * @example $('.date-picker').datePicker();
\r
356 * alert($('.date-picker').dpGetSelected());
\r
357 * @desc Will alert an empty array (as nothing is selected yet)
\r
359 dpGetSelected : function()
\r
361 var c = _getController(this[0]);
\r
363 return c.getSelected();
\r
368 * 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.
\r
370 * @param String d A string representing the date you want to select (formatted according to Date.format).
\r
371 * @param Boolean v Whether you want to select (true) or deselect (false) this date. Optional - default = true.
\r
372 * @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.
\r
373 * @param Boolean e Whether you want the date picker to dispatch events related to this change of selection. Optional - default = true.
\r
375 * @name dpSetSelected
\r
376 * @cat plugins/datePicker
\r
377 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
379 * @example $('.date-picker').datePicker();
\r
380 * $('.date-picker').dpSetSelected('01/01/2010');
\r
381 * @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.
\r
383 dpSetSelected : function(d, v, m, e)
\r
385 if (v == undefined) v=true;
\r
386 if (m == undefined) m=true;
\r
387 if (e == undefined) e=true;
\r
388 return _w.call(this, 'setSelected', Date.fromString(d), v, m, e);
\r
391 * 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.
\r
393 * @param Number m The month you want the date picker to display. Optional - defaults to the currently displayed month.
\r
394 * @param Number y The year you want the date picker to display. Optional - defaults to the currently displayed year.
\r
396 * @name dpSetDisplayedMonth
\r
397 * @cat plugins/datePicker
\r
398 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
400 * @example $('.date-picker').datePicker();
\r
401 * $('.date-picker').dpSetDisplayedMonth(10, 2008);
\r
402 * @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.
\r
404 dpSetDisplayedMonth : function(m, y)
\r
406 return _w.call(this, 'setDisplayedMonth', Number(m), Number(y), true);
\r
409 * 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.
\r
411 * @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.
\r
414 * @cat plugins/datePicker
\r
415 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
417 * @example $('#date-picker').datePicker();
\r
418 * $('#date-picker').dpDisplay();
\r
419 * @desc Creates a date picker associated with the element with an id of date-picker and then causes it to pop up.
\r
421 dpDisplay : function(e)
\r
423 return _w.call(this, 'display', e);
\r
426 * Sets a function or array of functions that is called when each TD of the date picker popup is rendered to the page
\r
428 * @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.
\r
430 * @name dpSetRenderCallback
\r
431 * @cat plugins/datePicker
\r
432 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
434 * @example $('#date-picker').datePicker();
\r
435 * $('#date-picker').dpSetRenderCallback(function($td, thisDate, month, year)
\r
437 * // do stuff as each td is rendered dependant on the date in the td and the displayed month and year
\r
439 * @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.
\r
441 dpSetRenderCallback : function(a)
\r
443 return _w.call(this, 'setRenderCallback', a);
\r
446 * Sets the position that the datePicker will pop up (relative to it's associated element)
\r
448 * @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
\r
449 * @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
\r
451 * @name dpSetPosition
\r
452 * @cat plugins/datePicker
\r
453 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
455 * @example $('#date-picker').datePicker();
\r
456 * $('#date-picker').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_RIGHT);
\r
457 * @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.
\r
459 dpSetPosition : function(v, h)
\r
461 return _w.call(this, 'setPosition', v, h);
\r
464 * 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)
\r
466 * @param Number v The vertical offset of the created date picker.
\r
467 * @param Number h The horizontal offset of the created date picker.
\r
469 * @name dpSetOffset
\r
470 * @cat plugins/datePicker
\r
471 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
473 * @example $('#date-picker').datePicker();
\r
474 * $('#date-picker').dpSetOffset(-20, 200);
\r
475 * @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.
\r
477 dpSetOffset : function(v, h)
\r
479 return _w.call(this, 'setOffset', v, h);
\r
482 * Closes the open date picker associated with this element.
\r
486 * @cat plugins/datePicker
\r
487 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
489 * @example $('.date-pick')
\r
495 * $(this).dpDisplay();
\r
501 * $(this).dpClose();
\r
505 dpClose : function()
\r
507 return _w.call(this, '_closeCalendar', false, this[0]);
\r
510 * Rerenders the date picker's current month (for use with inline calendars and renderCallbacks).
\r
513 * @name dpRerenderCalendar
\r
514 * @cat plugins/datePicker
\r
515 * @author Kelvin Luck (http://www.kelvinluck.com/)
\r
518 dpRerenderCalendar : function()
\r
520 return _w.call(this, '_rerenderCalendar');
\r
522 // private function called on unload to clean up any expandos etc and prevent memory links...
\r
523 _dpDestroy : function()
\r
525 // TODO - implement this?
\r
529 // private internal function to cut down on the amount of code needed where we forward
\r
530 // dp* methods on the jQuery object on to the relevant DatePicker controllers...
\r
531 var _w = function(f, a1, a2, a3, a4)
\r
536 var c = _getController(this);
\r
538 c[f](a1, a2, a3, a4);
\r
544 function DatePicker(ele)
\r
548 // initial values...
\r
549 this.displayedMonth = null;
\r
550 this.displayedYear = null;
\r
551 this.startDate = null;
\r
552 this.endDate = null;
\r
553 this.showYearNavigation = null;
\r
554 this.closeOnSelect = null;
\r
555 this.displayClose = null;
\r
556 this.rememberViewedMonth= null;
\r
557 this.selectMultiple = null;
\r
558 this.numSelectable = null;
\r
559 this.numSelected = null;
\r
560 this.verticalPosition = null;
\r
561 this.horizontalPosition = null;
\r
562 this.verticalOffset = null;
\r
563 this.horizontalOffset = null;
\r
564 this.button = null;
\r
565 this.renderCallback = [];
\r
566 this.selectedDates = {};
\r
567 this.inline = null;
\r
568 this.context = '#dp-popup';
\r
569 this.settings = {};
\r
572 DatePicker.prototype,
\r
576 this.setStartDate(s.startDate);
\r
577 this.setEndDate(s.endDate);
\r
578 this.setDisplayedMonth(Number(s.month), Number(s.year));
\r
579 this.setRenderCallback(s.renderCallback);
\r
580 this.showYearNavigation = s.showYearNavigation;
\r
581 this.closeOnSelect = s.closeOnSelect;
\r
582 this.displayClose = s.displayClose;
\r
583 this.rememberViewedMonth = s.rememberViewedMonth;
\r
584 this.selectMultiple = s.selectMultiple;
\r
585 this.numSelectable = s.selectMultiple ? s.numSelectable : 1;
\r
586 this.numSelected = 0;
\r
587 this.verticalPosition = s.verticalPosition;
\r
588 this.horizontalPosition = s.horizontalPosition;
\r
589 this.hoverClass = s.hoverClass;
\r
590 this.setOffset(s.verticalOffset, s.horizontalOffset);
\r
591 this.inline = s.inline;
\r
594 this.context = this.ele;
\r
598 setStartDate : function(d)
\r
601 this.startDate = Date.fromString(d);
\r
603 if (!this.startDate) {
\r
604 this.startDate = (new Date()).zeroTime();
\r
606 this.setDisplayedMonth(this.displayedMonth, this.displayedYear);
\r
608 setEndDate : function(d)
\r
611 this.endDate = Date.fromString(d);
\r
613 if (!this.endDate) {
\r
614 this.endDate = (new Date('12/31/2999')); // using the JS Date.parse function which expects mm/dd/yyyy
\r
616 if (this.endDate.getTime() < this.startDate.getTime()) {
\r
617 this.endDate = this.startDate;
\r
619 this.setDisplayedMonth(this.displayedMonth, this.displayedYear);
\r
621 setPosition : function(v, h)
\r
623 this.verticalPosition = v;
\r
624 this.horizontalPosition = h;
\r
626 setOffset : function(v, h)
\r
628 this.verticalOffset = parseInt(v) || 0;
\r
629 this.horizontalOffset = parseInt(h) || 0;
\r
631 setDisabled : function(s)
\r
634 $e[s ? 'addClass' : 'removeClass']('dp-disabled');
\r
636 $but = $(this.button);
\r
637 $but[s ? 'addClass' : 'removeClass']('dp-disabled');
\r
638 $but.attr('title', s ? '' : $.dpText.TEXT_CHOOSE_DATE);
\r
640 if ($e.is(':text')) {
\r
641 $e.attr('disabled', s ? 'disabled' : '');
\r
644 setDisplayedMonth : function(m, y, rerender)
\r
646 if (this.startDate == undefined || this.endDate == undefined) {
\r
649 var s = new Date(this.startDate.getTime());
\r
651 var e = new Date(this.endDate.getTime());
\r
655 if ((!m && !y) || (isNaN(m) && isNaN(y))) {
\r
656 // no month or year passed - default to current month
\r
657 t = new Date().zeroTime();
\r
659 } else if (isNaN(m)) {
\r
660 // just year passed in - presume we want the displayedMonth
\r
661 t = new Date(y, this.displayedMonth, 1);
\r
662 } else if (isNaN(y)) {
\r
663 // just month passed in - presume we want the displayedYear
\r
664 t = new Date(this.displayedYear, m, 1);
\r
666 // year and month passed in - that's the date we want!
\r
667 t = new Date(y, m, 1)
\r
669 // check if the desired date is within the range of our defined startDate and endDate
\r
670 if (t.getTime() < s.getTime()) {
\r
672 } else if (t.getTime() > e.getTime()) {
\r
675 var oldMonth = this.displayedMonth;
\r
676 var oldYear = this.displayedYear;
\r
677 this.displayedMonth = t.getMonth();
\r
678 this.displayedYear = t.getFullYear();
\r
680 if (rerender && (this.displayedMonth != oldMonth || this.displayedYear != oldYear))
\r
682 this._rerenderCalendar();
\r
683 $(this.ele).trigger('dpMonthChanged', [this.displayedMonth, this.displayedYear]);
\r
686 setSelected : function(d, v, moveToMonth, dispatchEvents)
\r
688 if (d < this.startDate || d > this.endDate) {
\r
689 // Don't allow people to select dates outside range...
\r
692 var s = this.settings;
\r
695 d = d.addDays(- (d.getDay() - Date.firstDayOfWeek + 7) % 7);
\r
696 if (d < this.startDate) // The first day of this week is before the start date so is unselectable...
\r
701 if (v == this.isSelected(d)) // this date is already un/selected
\r
705 if (this.selectMultiple == false) {
\r
706 this.clearSelected();
\r
707 } else if (v && this.numSelected == this.numSelectable) {
\r
708 // can't select any more dates...
\r
711 if (moveToMonth && (this.displayedMonth != d.getMonth() || this.displayedYear != d.getFullYear())) {
\r
712 this.setDisplayedMonth(d.getMonth(), d.getFullYear(), true);
\r
714 this.selectedDates[d.asString()] = v;
\r
715 this.numSelected += v ? 1 : -1;
\r
716 var selectorString = 'td.' + (d.getMonth() == this.displayedMonth ? 'current-month' : 'other-month');
\r
718 $(selectorString, this.context).each(
\r
721 if ($(this).data('datePickerDate') == d.asString()) {
\r
725 $td.parent()[v ? 'addClass' : 'removeClass']('selectedWeek');
\r
727 $td[v ? 'addClass' : 'removeClass']('selected');
\r
731 $('td', this.context).not('.selected')[this.selectMultiple && this.numSelected == this.numSelectable ? 'addClass' : 'removeClass']('unselectable');
\r
733 if (dispatchEvents)
\r
735 var s = this.isSelected(d);
\r
737 var dClone = Date.fromString(d.asString());
\r
738 $e.trigger('dateSelected', [dClone, $td, s]);
\r
739 $e.trigger('change');
\r
742 isSelected : function(d)
\r
744 return this.selectedDates[d.asString()];
\r
746 getSelected : function()
\r
749 for(s in this.selectedDates) {
\r
750 if (this.selectedDates[s] == true) {
\r
751 r.push(Date.fromString(s));
\r
756 clearSelected : function()
\r
758 this.selectedDates = {};
\r
759 this.numSelected = 0;
\r
760 $('td.selected', this.context).removeClass('selected').parent().removeClass('selectedWeek');
\r
762 display : function(eleAlignTo)
\r
764 if ($(this.ele).is('.dp-disabled')) return;
\r
766 eleAlignTo = eleAlignTo || this.ele;
\r
768 var $ele = $(eleAlignTo);
\r
769 var eleOffset = $ele.offset();
\r
773 var attrsCalendarHolder;
\r
777 $createIn = $(this.ele);
\r
779 'id' : 'calendar-' + this.ele._dpId,
\r
780 'class' : 'dp-popup dp-popup-inline'
\r
783 $('.dp-popup', $createIn).remove();
\r
787 $createIn = $('body');
\r
790 'class' : 'dp-popup'
\r
793 'top' : eleOffset.top + c.verticalOffset,
\r
794 'left' : eleOffset.left + c.horizontalOffset
\r
797 var _checkMouse = function(e)
\r
800 var cal = $('#dp-popup')[0];
\r
805 } else if (el == document) {
\r
806 c._closeCalendar();
\r
809 el = $(el).parent()[0];
\r
813 this._checkMouse = _checkMouse;
\r
815 c._closeCalendar(true);
\r
817 'keydown.datepicker',
\r
820 if (event.keyCode == 27) {
\r
821 c._closeCalendar();
\r
827 if (!c.rememberViewedMonth)
\r
829 var selectedDate = this.getSelected()[0];
\r
830 if (selectedDate) {
\r
831 selectedDate = new Date(selectedDate);
\r
832 this.setDisplayedMonth(selectedDate.getMonth(), selectedDate.getFullYear(), false);
\r
842 // $('<a href="#" class="selecteee">aaa</a>'),
\r
844 $('<div class="dp-nav-prev"></div>')
\r
846 $('<a class="dp-nav-prev-year" href="#" title="' + $.dpText.TEXT_PREV_YEAR + '"><<</a>')
\r
851 return c._displayNewMonth.call(c, this, 0, -1);
\r
854 $('<a class="dp-nav-prev-month" href="#" title="' + $.dpText.TEXT_PREV_MONTH + '"><</a>')
\r
859 return c._displayNewMonth.call(c, this, -1, 0);
\r
863 $('<div class="dp-nav-next"></div>')
\r
865 $('<a class="dp-nav-next-year" href="#" title="' + $.dpText.TEXT_NEXT_YEAR + '">>></a>')
\r
870 return c._displayNewMonth.call(c, this, 0, 1);
\r
873 $('<a class="dp-nav-next-month" href="#" title="' + $.dpText.TEXT_NEXT_MONTH + '">></a>')
\r
878 return c._displayNewMonth.call(c, this, 1, 0);
\r
882 $('<div class="dp-calendar"></div>')
\r
887 var $pop = this.inline ? $('.dp-popup', this.context) : $('#dp-popup');
\r
889 if (this.showYearNavigation == false) {
\r
890 $('.dp-nav-prev-year, .dp-nav-next-year', c.context).css('display', 'none');
\r
892 if (this.displayClose) {
\r
894 $('<a href="#" id="dp-close">' + $.dpText.TEXT_CLOSE + '</a>')
\r
899 c._closeCalendar();
\r
905 c._renderCalendar();
\r
907 $(this.ele).trigger('dpDisplayed', $pop);
\r
910 if (this.verticalPosition == $.dpConst.POS_BOTTOM) {
\r
911 $pop.css('top', eleOffset.top + $ele.height() - $pop.height() + c.verticalOffset);
\r
913 if (this.horizontalPosition == $.dpConst.POS_RIGHT) {
\r
914 $pop.css('left', eleOffset.left + $ele.width() - $pop.width() + c.horizontalOffset);
\r
916 // $('.selectee', this.context).focus();
\r
917 $(document).bind('mousedown.datepicker', this._checkMouse);
\r
921 setRenderCallback : function(a)
\r
923 if (a == null) return;
\r
924 if (a && typeof(a) == 'function') {
\r
927 this.renderCallback = this.renderCallback.concat(a);
\r
929 cellRender : function ($td, thisDate, month, year) {
\r
930 var c = this.dpController;
\r
931 var d = new Date(thisDate.getTime());
\r
933 // add our click handlers to deal with it when the days are clicked...
\r
939 var $this = $(this);
\r
940 if (!$this.is('.disabled')) {
\r
941 c.setSelected(d, !$this.is('.selected') || !c.selectMultiple, false, true);
\r
942 if (c.closeOnSelect) {
\r
943 c._closeCalendar();
\r
945 // TODO: Instead of this which doesn't work in IE anyway we should find the next focusable element in the document
\r
946 // and pass the focus onto that. That would allow the user to continue on the form as expected...
\r
947 if (!$.browser.msie)
\r
949 $(c.ele).trigger('focus', [$.dpConst.DP_INTERNAL_FOCUS]);
\r
954 if (c.isSelected(d)) {
\r
955 $td.addClass('selected');
\r
956 if (c.settings.selectWeek)
\r
958 $td.parent().addClass('selectedWeek');
\r
960 } else if (c.selectMultiple && c.numSelected == c.numSelectable) {
\r
961 $td.addClass('unselectable');
\r
965 _applyRenderCallbacks : function()
\r
968 $('td', this.context).each(
\r
971 for (var i=0; i<c.renderCallback.length; i++) {
\r
973 c.renderCallback[i].apply(this, [$td, Date.fromString($td.data('datePickerDate')), c.displayedMonth, c.displayedYear]);
\r
979 // ele is the clicked button - only proceed if it doesn't have the class disabled...
\r
980 // m and y are -1, 0 or 1 depending which direction we want to go in...
\r
981 _displayNewMonth : function(ele, m, y)
\r
983 if (!$(ele).is('.disabled')) {
\r
984 this.setDisplayedMonth(this.displayedMonth + m, this.displayedYear + y, true);
\r
989 _rerenderCalendar : function()
\r
991 this._clearCalendar();
\r
992 this._renderCalendar();
\r
994 _renderCalendar : function()
\r
996 // set the title...
\r
997 $('h2', this.context).html((new Date(this.displayedYear, this.displayedMonth, 1)).asString($.dpText.HEADER_FORMAT));
\r
999 // render the calendar...
\r
1000 $('.dp-calendar', this.context).renderCalendar(
\r
1005 month : this.displayedMonth,
\r
1006 year : this.displayedYear,
\r
1007 renderCallback : this.cellRender,
\r
1008 dpController : this,
\r
1009 hoverClass : this.hoverClass
\r
1013 // update the status of the control buttons and disable dates before startDate or after endDate...
\r
1014 // 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?
\r
1015 if (this.displayedYear == this.startDate.getFullYear() && this.displayedMonth == this.startDate.getMonth()) {
\r
1016 $('.dp-nav-prev-year', this.context).addClass('disabled');
\r
1017 $('.dp-nav-prev-month', this.context).addClass('disabled');
\r
1018 $('.dp-calendar td.other-month', this.context).each(
\r
1021 var $this = $(this);
\r
1022 if (Number($this.text()) > 20) {
\r
1023 $this.addClass('disabled');
\r
1027 var d = this.startDate.getDate();
\r
1028 $('.dp-calendar td.current-month', this.context).each(
\r
1031 var $this = $(this);
\r
1032 if (Number($this.text()) < d) {
\r
1033 $this.addClass('disabled');
\r
1038 $('.dp-nav-prev-year', this.context).removeClass('disabled');
\r
1039 $('.dp-nav-prev-month', this.context).removeClass('disabled');
\r
1040 var d = this.startDate.getDate();
\r
1042 // check if the startDate is last month as we might need to add some disabled classes...
\r
1043 var st = this.startDate.getTime();
\r
1044 var sd = new Date(st);
\r
1046 if (this.displayedYear == sd.getFullYear() && this.displayedMonth == sd.getMonth()) {
\r
1047 $('.dp-calendar td.other-month', this.context).each(
\r
1050 var $this = $(this);
\r
1051 if (Date.fromString($this.data('datePickerDate')).getTime() < st) {
\r
1052 $this.addClass('disabled');
\r
1059 if (this.displayedYear == this.endDate.getFullYear() && this.displayedMonth == this.endDate.getMonth()) {
\r
1060 $('.dp-nav-next-year', this.context).addClass('disabled');
\r
1061 $('.dp-nav-next-month', this.context).addClass('disabled');
\r
1062 $('.dp-calendar td.other-month', this.context).each(
\r
1065 var $this = $(this);
\r
1066 if (Number($this.text()) < 14) {
\r
1067 $this.addClass('disabled');
\r
1071 var d = this.endDate.getDate();
\r
1072 $('.dp-calendar td.current-month', this.context).each(
\r
1075 var $this = $(this);
\r
1076 if (Number($this.text()) > d) {
\r
1077 $this.addClass('disabled');
\r
1082 $('.dp-nav-next-year', this.context).removeClass('disabled');
\r
1083 $('.dp-nav-next-month', this.context).removeClass('disabled');
\r
1084 var d = this.endDate.getDate();
\r
1086 // check if the endDate is next month as we might need to add some disabled classes...
\r
1087 var ed = new Date(this.endDate.getTime());
\r
1089 if (this.displayedYear == ed.getFullYear() && this.displayedMonth == ed.getMonth()) {
\r
1090 $('.dp-calendar td.other-month', this.context).each(
\r
1093 var $this = $(this);
1094 var cellDay = Number($this.text());
\r
1095 if (cellDay < 13 && cellDay > d) {
\r
1096 $this.addClass('disabled');
\r
1103 this._applyRenderCallbacks();
\r
1105 _closeCalendar : function(programatic, ele)
\r
1107 if (!ele || ele == this.ele)
\r
1109 $(document).unbind('mousedown.datepicker');
\r
1110 $(document).unbind('keydown.datepicker');
\r
1111 this._clearCalendar();
\r
1112 $('#dp-popup a').unbind();
\r
1113 $('#dp-popup').empty().remove();
\r
1114 if (!programatic) {
\r
1115 $(this.ele).trigger('dpClosed', [this.getSelected()]);
\r
1119 // empties the current dp-calendar div and makes sure that all events are unbound
\r
1120 // and expandos removed to avoid memory leaks...
\r
1121 _clearCalendar : function()
\r
1124 $('.dp-calendar td', this.context).unbind();
\r
1125 $('.dp-calendar', this.context).empty();
\r
1130 // static constants
\r
1132 SHOW_HEADER_NONE : 0,
\r
1133 SHOW_HEADER_SHORT : 1,
\r
1134 SHOW_HEADER_LONG : 2,
\r
1139 DP_INTERNAL_FOCUS : 'dpInternalFocusTrigger'
\r
1141 // localisable text
\r
1143 TEXT_PREV_YEAR : 'Previous year',
\r
1144 TEXT_PREV_MONTH : 'Previous month',
\r
1145 TEXT_NEXT_YEAR : 'Next year',
\r
1146 TEXT_NEXT_MONTH : 'Next month',
\r
1147 TEXT_CLOSE : 'Close',
\r
1148 TEXT_CHOOSE_DATE : 'Choose date',
\r
1149 HEADER_FORMAT : 'mmmm yyyy'
\r
1152 $.dpVersion = '$Id: jquery.datePicker.js 94 2010-01-25 02:25:27Z kelvin.luck $';
\r
1154 $.fn.datePicker.defaults = {
\r
1155 month : undefined,
\r
1157 showHeader : $.dpConst.SHOW_HEADER_SHORT,
\r
1158 startDate : undefined,
\r
1159 endDate : undefined,
\r
1161 renderCallback : null,
\r
1162 createButton : true,
\r
1163 showYearNavigation : true,
\r
1164 closeOnSelect : true,
\r
1165 displayClose : false,
\r
1166 selectMultiple : false,
\r
1167 numSelectable : Number.MAX_VALUE,
\r
1168 clickInput : false,
\r
1169 rememberViewedMonth : true,
\r
1170 selectWeek : false,
\r
1171 verticalPosition : $.dpConst.POS_TOP,
\r
1172 horizontalPosition : $.dpConst.POS_LEFT,
\r
1173 verticalOffset : 0,
\r
1174 horizontalOffset : 0,
\r
1175 hoverClass : 'dp-hover'
\r
1178 function _getController(ele)
\r
1180 if (ele._dpId) return $.event._dpCache[ele._dpId];
\r
1184 // make it so that no error is thrown if bgIframe plugin isn't included (allows you to use conditional
\r
1185 // comments to only include bgIframe where it is needed in IE without breaking this plugin).
\r
1186 if ($.fn.bgIframe == undefined) {
\r
1187 $.fn.bgIframe = function() {return this; };
\r
1193 .bind('unload', function() {
\r
1194 var els = $.event._dpCache || [];
\r
1195 for (var i in els) {
\r
1196 $(els[i].ele)._dpDestroy();
\r