[Summary view] [Print] [Text view]

   1  /* http://keith-wood.name/datepick.html

   2     Datepicker extensions for jQuery v4.1.0.

   3     Written by Keith Wood (kbwood{at}iinet.com.au) August 2009.

   4     Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and 

   5     MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses. 

   6     Please attribute the author if you use it. */
   7  
   8  (function($) { // Hide scope, no $ conflict
   9  
  10  var themeRollerRenderer = {
  11      picker: '<div{popup:start} id="ui-datepicker-div"{popup:end} class="ui-datepicker ui-widget ' +
  12      'ui-widget-content ui-helper-clearfix ui-corner-all{inline:start} ui-datepicker-inline{inline:end}">' +
  13      '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">' +
  14      '{link:prev}{link:today}{link:next}</div>{months}' +
  15      '{popup:start}<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ' +
  16      'ui-corner-all">{button:clear}{button:close}</div>{popup:end}' +
  17      '<div class="ui-helper-clearfix"></div></div>',
  18      monthRow: '<div class="ui-datepicker-row-break">{months}</div>',
  19      month: '<div class="ui-datepicker-group">' +
  20      '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">{monthHeader:MM yyyy}</div>' +
  21      '<table class="ui-datepicker-calendar"><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table></div>',
  22      weekHeader: '<tr>{days}</tr>',
  23      dayHeader: '<th>{day}</th>',
  24      week: '<tr>{days}</tr>',
  25      day: '<td>{day}</td>',
  26      monthSelector: '.ui-datepicker-group',
  27      daySelector: 'td',
  28      rtlClass: 'ui-datepicker-rtl',
  29      multiClass: 'ui-datepicker-multi',
  30      defaultClass: 'ui-state-default',
  31      selectedClass: 'ui-state-active',
  32      highlightedClass: 'ui-state-hover',
  33      todayClass: 'ui-state-highlight',
  34      otherMonthClass: 'ui-datepicker-other-month',
  35      weekendClass: 'ui-datepicker-week-end',
  36      commandClass: 'ui-datepicker-cmd',
  37      commandButtonClass: 'ui-state-default ui-corner-all',
  38      commandLinkClass: '',
  39      disabledClass: 'ui-datepicker-disabled'
  40  };
  41  
  42  $.extend($.datepick, {
  43  
  44      // Template for generating a datepicker showing week of year.

  45      weekOfYearRenderer: $.extend({}, $.datepick.defaultRenderer, {
  46          weekHeader: '<tr><th class="datepick-week">' +
  47          '<span title="{l10n:weekStatus}">{l10n:weekText}</span></th>{days}</tr>',
  48          week: '<tr><td class="datepick-week">{weekOfYear}</td>{days}</tr>'
  49      }),
  50  
  51      // ThemeRoller template for generating a datepicker.

  52      themeRollerRenderer: themeRollerRenderer,
  53  
  54      // ThemeRoller template for generating a datepicker showing week of year.

  55      themeRollerWeekOfYearRenderer: $.extend({}, themeRollerRenderer, {
  56          weekHeader: '<tr><th class="ui-state-hover"><span>{l10n:weekText}</span></th>{days}</tr>',
  57          week: '<tr><td class="ui-state-hover">{weekOfYear}</td>{days}</tr>'
  58      }),
  59  
  60      /* Don't allow weekends to be selected.

  61         Usage: onDate: $.datepick.noWeekends.

  62         @param  date  (Date) the current date

  63         @return  (object) information about this date */
  64      noWeekends: function(date) {
  65          return {selectable: (date.getDay() || 7) < 6};
  66      },
  67  
  68      /* Change the first day of the week by clicking on the day header.

  69         Usage: onShow: $.datepick.changeFirstDay.

  70         @param  picker  (jQuery) the completed datepicker division

  71         @param  inst    (object) the current instance settings */
  72      changeFirstDay: function(picker, inst) {
  73          var target = $(this);
  74          picker.find('th span').each(function() {
  75              var parent = $(this).parent();
  76              if (parent.is('.datepick-week') || parent.is('.ui-state-hover')) {
  77                  return;
  78              }
  79              $('<a href="javascript:void(0)" class="' + this.className +
  80                      '" title="Change first day of the week">' + $(this).text() + '</a>').
  81                  click(function() {
  82                      var dow = parseInt(this.className.replace(/^.*datepick-dow-(\d+).*$/, '$1'), 10);
  83                      target.datepick('option', {firstDay: dow});
  84                  }).
  85                  replaceAll(this);
  86          });
  87      },
  88  
  89      /* Add a callback when hovering over dates.

  90         Usage: onShow: $.datepick.hoverCallback(handleHover).

  91         @param  onHover  (function) the callback when hovering,

  92                          it receives the current date and a flag indicating selectability

  93                          as parameters on entry, and no parameters on exit,

  94                          this refers to the target input or division */
  95      hoverCallback: function(onHover) {
  96          return function(picker, inst) {
  97              if ($.isFunction(onHover)) {
  98                  var target = this;
  99                  picker.find(inst.options.renderer.daySelector + ' a, ' +
 100                          inst.options.renderer.daySelector + ' span').
 101                      hover(function() {
 102                          onHover.apply(target, [$(target).datepick('retrieveDate', this),
 103                              this.nodeName.toLowerCase() == 'a']);
 104                      },
 105                      function() { onHover.apply(target, []); });
 106              }
 107          };
 108      },
 109  
 110      /* Highlight the entire week when hovering over it.

 111         Usage: onShow: $.datepick.highlightWeek.

 112         @param  picker  (jQuery) the completed datepicker division

 113         @param  inst    (object) the current instance settings */
 114      highlightWeek: function(picker, inst) {
 115          var target = this;
 116          var renderer = inst.options.renderer;
 117          picker.find(renderer.daySelector + ' a, ' + renderer.daySelector + ' span').
 118              hover(function() {
 119                  $(this).parents('tr').find(renderer.daySelector + ' *').
 120                      addClass(renderer.highlightedClass);
 121              },
 122              function() {
 123                  $(this).parents('tr').find(renderer.daySelector + ' *').
 124                      removeClass(renderer.highlightedClass);
 125              });
 126      },
 127  
 128      /* Show a status bar with messages.

 129         Usage: onShow: $.datepick.showStatus.

 130         @param  picker  (jQuery) the completed datepicker division

 131         @param  inst    (object) the current instance settings */
 132      showStatus: function(picker, inst) {
 133          var isTR = (inst.options.renderer.selectedClass == themeRollerRenderer.selectedClass);
 134          var defaultStatus = inst.options.defaultStatus || '&nbsp;';
 135          var status = $('<div class="' + (!isTR ? 'datepick-status' :
 136              'ui-datepicker-status ui-widget-header ui-helper-clearfix ui-corner-all') + '">' +
 137              defaultStatus + '</div>').
 138              insertAfter(picker.find('.datepick-month-row:last,.ui-datepicker-row-break:last'));
 139          picker.find('*[title]').each(function() {
 140                  var title = $(this).attr('title');
 141                  $(this).removeAttr('title').hover(
 142                      function() { status.text(title || defaultStatus); },
 143                      function() { status.text(defaultStatus); });
 144              });
 145      },
 146  
 147      /* Allow easier navigation by month/year.

 148         Usage: onShow: $.datepick.monthNavigation.

 149         @param  picker  (jQuery) the completed datepicker division

 150         @param  inst    (object) the current instance settings */
 151      monthNavigation: function(picker, inst) {
 152          var target = $(this);
 153          var isTR = (inst.options.renderer.selectedClass == themeRollerRenderer.selectedClass);
 154          var minDate = inst.curMinDate();
 155          var maxDate = inst.get('maxDate');
 156          var month = inst.drawDate.getMonth();
 157          var year = inst.drawDate.getFullYear();
 158          var html = '<div class="' + (!isTR ? 'datepick-month-nav' : 'ui-datepicker-month-nav') + '"' +
 159              ' style="display: none;">';
 160          for (var i = 0; i < inst.options.monthNames.length; i++) {
 161              var inRange = ((!minDate || new Date(year, i + 1, 0).getTime() >= minDate.getTime()) &&
 162                  (!maxDate || new Date(year, i, 1).getTime() <= maxDate.getTime()));
 163              html += '<div>' +
 164                  (inRange ? '<a href="#" class="dp' + new Date(year, i, 1).getTime() + '"' : '<span') +
 165                  ' title="' + inst.options.monthNames[i] + '">' + inst.options.monthNamesShort[i] +
 166                  (inRange ? '</a>' : '</span>') + '</div>';
 167          }
 168          for (var i = -6; i <= 6; i++) {
 169              if (i == 0) {
 170                  continue;
 171              }
 172              var inRange =
 173                  ((!minDate || new Date(year + i, 12 - 1, 31).getTime() >= minDate.getTime()) &&
 174                  (!maxDate || new Date(year + i, 1 - 1, 1).getTime() <= maxDate.getTime()));
 175              html += '<div>' + (inRange ? '<a href="#" class="dp' +
 176                  new Date(year + i, month, 1).getTime() + '"' : '<span') +
 177                  ' title="' + (year + i) + '">' + (year + i) +
 178                  (inRange ? '</a>' : '</span>') + '</div>';
 179          }
 180          html += '</div>';
 181          html = $(html).insertAfter(picker.find('div.datepick-nav,div.ui-datepicker-header:first'));
 182          html.find('a').click(function() {
 183                  var date = target.datepick('retrieveDate', this);
 184                  target.datepick('showMonth', date.getFullYear(), date.getMonth() + 1);
 185                  return false;
 186              });
 187          picker.find('div.datepick-month-header,div.ui-datepicker-month-header').click(function() {
 188              html.slideToggle();
 189          }).css('cursor', 'pointer');
 190      },
 191  
 192      /* Select an entire week when clicking on a week number.

 193         Use in conjunction with weekOfYearRenderer or themeRollerWeekOfYearRenderer.

 194         Usage: onShow: $.datepick.selectWeek.

 195         @param  picker  (jQuery) the completed datepicker division

 196         @param  inst    (object) the current instance settings */
 197      selectWeek: function(picker, inst) {
 198          var target = $(this);
 199          picker.find('td.datepick-week span,td.ui-state-hover span').each(function() {
 200              $('<a href="javascript:void(0)" class="' +
 201                      this.className + '" title="Select the entire week">' +
 202                      $(this).text() + '</a>').
 203                  click(function() {
 204                      var date = target.datepick('retrieveDate', this);
 205                      var dates = [date];
 206                      for (var i = 1; i < 7; i++) {
 207                          dates.push(date = $.datepick.add($.datepick.newDate(date), 1, 'd'));
 208                      }
 209                      if (inst.options.rangeSelect) {
 210                          dates.splice(1, dates.length - 2);
 211                      }
 212                      target.datepick('setDate', dates).datepick('hide');
 213                  }).
 214                  replaceAll(this);
 215          });
 216      },
 217  
 218      /* Select an entire month when clicking on the week header.

 219         Use in conjunction with weekOfYearRenderer or themeRollerWeekOfYearRenderer.

 220         Usage: onShow: $.datepick.selectMonth.

 221         @param  picker  (jQuery) the completed datepicker division

 222         @param  inst    (object) the current instance settings */
 223      selectMonth: function(picker, inst) {
 224          var target = $(this);
 225          picker.find('th.datepick-week span,th.ui-state-hover span').each(function() {
 226              $('<a href="javascript:void(0)" title="Select the entire month">' +
 227                      $(this).text() + '</a>').
 228                  click(function() {
 229                      var date = target.datepick('retrieveDate', $(this).parents('table').
 230                          find('td:not(.datepick-week):not(.ui-state-hover) ' +
 231                              '*:not(.datepick-other-month):not(.ui-datepicker-other-month)')[0]);
 232                      var dates = [date];
 233                      var dim = $.datepick.daysInMonth(date);
 234                      for (var i = 1; i < dim; i++) {
 235                          dates.push(date = $.datepick.add($.datepick.newDate(date), 1, 'd'));
 236                      }
 237                      if (inst.options.rangeSelect) {
 238                          dates.splice(1, dates.length - 2);
 239                      }
 240                      target.datepick('setDate', dates).datepick('hide');
 241                  }).
 242                  replaceAll(this);
 243          });
 244      },
 245  
 246      /* Select a month only instead of a single day.

 247         Usage: onShow: $.datepick.monthOnly.

 248         @param  picker  (jQuery) the completed datepicker division

 249         @param  inst    (object) the current instance settings */
 250      monthOnly: function(picker, inst) {
 251          var target = $(this);
 252          var selectMonth = $('<div style="text-align: center;"><button type="button">Select</button></div>').
 253              insertAfter(picker.find('.datepick-month-row:last,.ui-datepicker-row-break:last')).
 254              children().click(function() {
 255                  var monthYear = picker.find('.datepick-month-year:first').val().split('/');
 256                  target.datepick('setDate', $.datepick.newDate(
 257                      parseInt(monthYear[1], 10), parseInt(monthYear[0], 10), 1)).
 258                      datepick('hide');
 259              });
 260          picker.find('.datepick-month-row table,.ui-datepicker-row-break table').remove();
 261      }
 262  });
 263  
 264  })(jQuery);