webform.js 3.0 KB

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