/* http://keith-wood.name/calendars.html Calendars date picker extensions for jQuery v2.1.0. Written by Keith Wood (wood.keith{at}optusnet.com.au) August 2009. Available under the MIT (http://keith-wood.name/licence.html) license. Please attribute the author if you use it. */ (function($) { // Hide scope, no $ conflict 'use strict'; var themeRollerRenderer = { picker: '' + '
' + '{link:prev}{link:today}{link:next}
{months}' + '{popup:start}
{button:clear}{button:close}
{popup:end}' + '
', monthRow: '
{months}
', month: '
' + '
{monthHeader:MM yyyy}
' + '{weekHeader}{weeks}
', weekHeader: '{days}', dayHeader: '{day}', week: '{days}', day: '{day}', monthSelector: '.ui-datepicker-group', daySelector: 'td', rtlClass: 'ui-datepicker-rtl', multiClass: 'ui-datepicker-multi', defaultClass: 'ui-state-default', selectedClass: 'ui-state-active', highlightedClass: 'ui-state-hover', todayClass: 'ui-state-highlight', otherMonthClass: 'ui-datepicker-other-month', weekendClass: 'ui-datepicker-week-end', commandClass: 'ui-datepicker-cmd', commandButtonClass: 'ui-state-default ui-corner-all', commandLinkClass: '', disabledClass: 'ui-datepicker-disabled' }; $.extend($.calendarsPicker, { /** Template for generating a calendar picker showing week of year. Used with the {@linkcode CalendarsPicker.regionalOptions|renderer} regional option. @memberof CalendarsPicker @example renderer: $.calendarsPicker.weekOfYearRenderer */ weekOfYearRenderer: $.extend({}, $.calendarsPicker.defaultRenderer, { weekHeader: '' + '{l10n:weekText}{days}', week: '{weekOfYear}{days}' }), /** ThemeRoller template for generating a calendar picker. Used with the {@linkcode CalendarsPicker.regionalOptions|renderer} regional option. @memberof CalendarsPicker @example renderer: $.calendarsPicker.themeRollerRenderer */ themeRollerRenderer: themeRollerRenderer, /** ThemeRoller template for generating a calendar picker showing week of year. Used with the {@linkcode CalendarsPicker.regionalOptions|renderer} regional option. @memberof CalendarsPicker @example renderer: $.calendarsPicker.themeRollerWeekOfYearRenderer */ themeRollerWeekOfYearRenderer: $.extend({}, themeRollerRenderer, { weekHeader: '{l10n:weekText}{days}', week: '{weekOfYear}{days}' }), /** Don't allow weekends to be selected. Used with the {@linkcode CalendarsPicker.defaultOptions|onDate} option. @memberof CalendarsPicker @param {CDate} date The current date. @return {object} Information about this date. @example onDate: $.calendarsPicker.noWeekends */ noWeekends: function(date) { return {selectable: date.weekDay()}; }, /** Change the first day of the week by clicking on the day header. Used with the {@linkcode CalendarsPicker.defaultOptions|onShow} option. @memberof CalendarsPicker @param {jQuery} picker The completed datepicker division. @example onShow: $.calendarsPicker.changeFirstDay */ changeFirstDay: function(picker) { var target = $(this); picker.find('th span').each(function() { if (this.parentNode.className.match(/.*calendars-week.*/)) { return; } $('' + $(this).text() + ''). click(function() { var dow = parseInt(this.className.replace(/^.*calendars-dow-(\d+).*$/, '$1'), 10); target.calendarsPicker('option', {firstDay: dow}); }). replaceAll(this); }); }, /** A function to call when a date is hovered. @callback CalendarsPickerOnHover @param {CDate} date The date being hovered or null on exit. @param {boolean} selectable true if this date is selectable, false if not. @example function showHovered(date, selectable) { $('#feedback').text('You are viewing ' + (date ? date.formatDate() : 'nothing')); } */ /** Add a callback when hovering over dates. Used with the {@linkcode CalendarsPicker.defaultOptions|onShow} option. @memberof CalendarsPicker @param {CalendarsPickerOnHover} onHover The callback when hovering. @example onShow: $.calendarsPicker.hoverCallback(showHovered) */ hoverCallback: function(onHover) { return function(picker, calendar, inst) { if ($.isFunction(onHover)) { var target = this; var renderer = inst.options.renderer; picker.find(renderer.daySelector + ' a, ' + renderer.daySelector + ' span'). hover(function() { onHover.apply(target, [$(target).calendarsPicker('retrieveDate', this), this.nodeName.toLowerCase() === 'a']); }, function() { onHover.apply(target, []); }); } }; }, /** Highlight the entire week when hovering over it. Used with the {@linkcode CalendarsPicker.defaultOptions|onShow} option. @memberof CalendarsPicker @param {jQuery} picker The completed datepicker division. @param {BaseCalendar} calendar The calendar implementation. @param {object} inst The current instance settings. @example onShow: $.calendarsPicker.highlightWeek */ highlightWeek: function(picker, calendar, inst) { var renderer = inst.options.renderer; picker.find(renderer.daySelector + ' a, ' + renderer.daySelector + ' span'). hover(function() { $(this).parents('tr').find(renderer.daySelector + ' *'). addClass(renderer.highlightedClass); }, function() { $(this).parents('tr').find(renderer.daySelector + ' *'). removeClass(renderer.highlightedClass); }); }, /** Show a status bar with messages. Used with the {@linkcode CalendarsPicker.defaultOptions|onShow} option. @memberof CalendarsPicker @param {jQuery} picker The completed datepicker division. @param {BaseCalendar} calendar The calendar implementation. @param {object} inst The current instance settings. @example onShow: $.calendarsPicker.showStatus */ showStatus: function(picker, calendar, inst) { var isTR = (inst.options.renderer.selectedClass === 'ui-state-active'); var defaultStatus = inst.options.defaultStatus || ' '; var status = $('
' + defaultStatus + '
'). insertAfter(picker.find('.calendars-month-row:last,.ui-datepicker-row-break:last')); picker.find('*[title]').each(function() { var title = $(this).attr('title'); $(this).removeAttr('title').hover( function() { status.text(title || defaultStatus); }, function() { status.text(defaultStatus); }); }); }, /** Allow easier navigation by month. Used with the {@linkcode CalendarsPicker.defaultOptions|onShow} option. @memberof CalendarsPicker @param {jQuery} picker The completed datepicker division. @param {BaseCalendar} calendar The calendar implementation. @param {object} inst The current instance settings. @example onShow: $.calendarsPicker.monthNavigation */ monthNavigation: function(picker, calendar, inst) { var target = $(this); var isTR = (inst.options.renderer.selectedClass === 'ui-state-active'); var minDate = inst.curMinDate(); var maxDate = inst.get('maxDate'); var year = inst.drawDate.year(); var html = '
'; for (var i = 0; i < calendar.monthsInYear(year); i++) { var ord = calendar.fromMonthOfYear(year, i + calendar.minMonth) - calendar.minMonth; var inRange = ((!minDate || calendar.newDate(year, i + calendar.minMonth, calendar.daysInMonth(year, i + calendar.minMonth)).compareTo(minDate) > -1) && (!maxDate || calendar.newDate(year, i + calendar.minMonth, calendar.minDay).compareTo(maxDate) < +1)); html += '
' + (inRange ? '' + calendar.local.monthNamesShort[ord] + (inRange ? '' : '') + '
'; } html += '
'; $(html).insertAfter(picker.find('div.calendars-nav,div.ui-datepicker-header:first')). find('a').click(function() { var date = target.calendarsPicker('retrieveDate', this); target.calendarsPicker('showMonth', date.year(), date.month()); return false; }); }, /** Select an entire week when clicking on a week number. Use in conjunction with {@linkcode CalendarsPicker.weekOfYearRenderer|weekOfYearRenderer}. Used with the {@linkcode CalendarsPicker.defaultOptions|onShow} option. @memberof CalendarsPicker @param {jQuery} picker The completed datepicker division. @param {BaseCalendar} calendar The calendar implementation. @param {object} inst The current instance settings. @example onShow: $.calendarsPicker.selectWeek */ selectWeek: function(picker, calendar, inst) { var target = $(this); picker.find('td.calendars-week span').each(function() { $('' + $(this).text() + ''). click(function() { var date = target.calendarsPicker('retrieveDate', this); var dates = [date]; for (var i = 1; i < calendar.daysInWeek(); i++) { dates.push(date = date.newDate().add(1, 'd')); } if (inst.options.rangeSelect) { dates.splice(1, dates.length - 2); } target.calendarsPicker('setDate', dates).calendarsPicker('hide'); }). replaceAll(this); }); }, /** Select an entire month when clicking on the week header. Use in conjunction with {@linkcode CalendarsPicker.weekOfYearRenderer|weekOfYearRenderer}. Used with the {@linkcode CalendarsPicker.defaultOptions|onShow} option. @memberof CalendarsPicker @param {jQuery} picker The completed datepicker division. @param {BaseCalendar} calendar The calendar implementation. @param {object} inst The current instance settings. @example onShow: $.calendarsPicker.selectMonth */ selectMonth: function(picker, calendar, inst) { var target = $(this); picker.find('th.calendars-week').each(function() { $('' + $(this).text() + ''). click(function() { var date = target.calendarsPicker('retrieveDate', $(this).parents('table'). find('td:not(.calendars-week) *:not(.calendars-other-month)')[0]); var dates = [date.day(1)]; var dim = calendar.daysInMonth(date); for (var i = 1; i < dim; i++) { dates.push(date = date.newDate().add(1, 'd')); } if (inst.options.rangeSelect) { dates.splice(1, dates.length - 2); } target.calendarsPicker('setDate', dates).calendarsPicker('hide'); }). appendTo(this); }); }, /** Select a month only instead of a single day. Used with the {@linkcode CalendarsPicker.defaultOptions|onShow} option. @memberof CalendarsPicker @param {jQuery} picker The completed datepicker division. @param {BaseCalendar} calendar The calendar implementation. @example onShow: $.calendarsPicker.monthOnly */ monthOnly: function(picker, calendar) { var target = $(this); $('
'). insertAfter(picker.find('.calendars-month-row:last,.ui-datepicker-row-break:last')). children().click(function() { var monthYear = picker.find('.calendars-month-year:first').val().split('/'); target.calendarsPicker('setDate', calendar.newDate( parseInt(monthYear[1], 10), parseInt(monthYear[0], 10), calendar.minDay)). calendarsPicker('hide'); }); picker.find('.calendars-month-row table,.ui-datepicker-row-break table').remove(); } }); })(jQuery);