[Summary view] [Print] [Text view]

   1  
   2  /**
   3   * JavaScript behaviors for the front-end display of webforms.
   4   */
   5  
   6  (function ($) {
   7  
   8  Drupal.behaviors.webform = function(context) {
   9    // Calendar datepicker behavior.
  10    Drupal.webform.datepicker(context);
  11  };
  12  
  13  Drupal.webform = Drupal.webform || {};
  14  
  15  Drupal.webform.datepicker = function(context) {
  16    $('div.webform-datepicker').each(function() {
  17      var $webformDatepicker = $(this);
  18      var $calendar = $webformDatepicker.find('input.webform-calendar');
  19      var startDate = $calendar[0].className.replace(/.*webform-calendar-start-(\d{4}-\d{2}-\d{2}).*/, '$1').split('-');
  20      var endDate = $calendar[0].className.replace(/.*webform-calendar-end-(\d{4}-\d{2}-\d{2}).*/, '$1').split('-');
  21      var firstDay = $calendar[0].className.replace(/.*webform-calendar-day-(\d).*/, '$1');
  22  
  23      // Convert date strings into actual Date objects.
  24      startDate = new Date(startDate[0], startDate[1] - 1, startDate[2]);
  25      endDate = new Date(endDate[0], endDate[1] - 1, endDate[2]);
  26  
  27      // Ensure that start comes before end for datepicker.
  28      if (startDate > endDate) {
  29        var laterDate = startDate;
  30        startDate = endDate;
  31        endDate = laterDate;
  32      }
  33  
  34      var startYear = startDate.getFullYear();
  35      var endYear = endDate.getFullYear();
  36  
  37      // Set up the jQuery datepicker element.
  38      $calendar.datepicker({
  39        dateFormat: 'yy-mm-dd',
  40        yearRange: startYear + ':' + endYear,
  41        firstDay: parseInt(firstDay),
  42        minDate: startDate,
  43        maxDate: endDate,
  44        onSelect: function(dateText, inst) {
  45          var date = dateText.split('-');
  46          $webformDatepicker.find('select.year, input.year').val(+date[0]);
  47          $webformDatepicker.find('select.month').val(+date[1]);
  48          $webformDatepicker.find('select.day').val(+date[2]);
  49        },
  50        beforeShow: function(input, inst) {
  51          // Get the select list values.
  52          var year = $webformDatepicker.find('select.year, input.year').val();
  53          var month = $webformDatepicker.find('select.month').val();
  54          var day = $webformDatepicker.find('select.day').val();
  55  
  56          // If empty, default to the current year/month/day in the popup.
  57          var today = new Date();
  58          year = year ? year : today.getFullYear();
  59          month = month ? month : today.getMonth() + 1;
  60          day = day ? day : today.getDate();
  61  
  62          // Make sure that the default year fits in the available options.
  63          year = (year < startYear || year > endYear) ? startYear : year;
  64  
  65          // jQuery UI Datepicker will read the input field and base its date off
  66          // of that, even though in our case the input field is a button.
  67          $(input).val(year + '-' + month + '-' + day);
  68        }
  69      });
  70  
  71      // Prevent the calendar button from submitting the form.
  72      $calendar.click(function(event) {
  73        $(this).focus();
  74        event.preventDefault();
  75      });
  76    });
  77  }
  78  
  79  })(jQuery);