/** * @file * Override polyfill for HTML5 date input and provide support for custom date formats. */ (function ($, Modernizr, Drupal) { 'use strict'; // @see http://api.jqueryui.com/datepicker/ Drupal.webform = Drupal.webform || {}; Drupal.webform.datePicker = Drupal.webform.datePicker || {}; Drupal.webform.datePicker.options = Drupal.webform.datePicker.options || {}; /** * Attach datepicker fallback on date elements. * * @type {Drupal~behavior} * * @prop {Drupal~behaviorAttach} attach * Attaches the behavior. Accepts in `settings.date` an object listing * elements to process, keyed by the HTML ID of the form element containing * the human-readable value. Each element is an datepicker settings object. * @prop {Drupal~behaviorDetach} detach * Detach the behavior destroying datepickers on effected elements. */ Drupal.behaviors.date = { attach: function (context, settings) { var $context = $(context); $context.find('input[data-drupal-date-format]').once('datePicker').each(function () { var $input = $(this); // Skip if date inputs are supported by the browser and input is not a text field. // @see \Drupal\webform\Element\WebformDatetime if (window.Modernizr && Modernizr.inputtypes.date === true && $input.attr('type') !== 'text') { return; } var options = $.extend({ changeMonth: true, changeYear: true }, Drupal.webform.datePicker.options); // Add datepicker button. if ($input.hasData('datepicker-button')) { options = $.extend({ showOn: 'both', buttonImage: settings.webform.datePicker.buttonImage, buttonImageOnly: true, buttonText: Drupal.t('Select date') }, Drupal.webform.datePicker.options); } var dateFormat = $input.data('drupalDateFormat'); // The date format is saved in PHP style, we need to convert to jQuery // datepicker. // @see http://stackoverflow.com/questions/16702398/convert-a-php-date-format-to-a-jqueryui-datepicker-date-format // @see http://php.net/manual/en/function.date.php options.dateFormat = dateFormat // Year. .replace('Y', 'yy') // A full numeric representation of a year, 4 digits (1999 or 2003) .replace('y', 'y') // A two digit representation of a year (99 or 03) // Month. .replace('F', 'MM') // A full textual representation of a month, such as January or March (January through December) .replace('m', 'mm') // Numeric representation of a month, with leading zeros (01 through 12) .replace('M', 'M') // A short textual representation of a month, three letters (Jan through Dec) .replace('n', 'm') // Numeric representation of a month, without leading zeros (1 through 12) // Day. .replace('d', 'dd') // Day of the month, 2 digits with leading zeros (01 to 31) .replace('D', 'D') // A textual representation of a day, three letters (Mon through Sun) .replace('j', 'd') // Day of the month without leading zeros (1 to 31) .replace('l', 'DD'); // A full textual representation of the day of the week (Sunday through Saturday) // Add min and max date if set on the input. if ($input.attr('min')) { options.minDate = $input.attr('min'); } if ($input.attr('max')) { options.maxDate = $input.attr('max'); } // Add min/max year to data range. if (!options.yearRange && $input.data('min-year') && $input.data('max-year')) { options.yearRange = $input.data('min-year') + ':' + $input.attr('data-max-year'); } // First day of the week. options.firstDay = settings.webform.dateFirstDay; // Disable autocomplete. // @see https://gist.github.com/niksumeiko/360164708c3b326bd1c8 var isChrome = /Chrome/.test(window.navigator.userAgent) && /Google Inc/.test(window.navigator.vendor); $input.attr('autocomplete', (isChrome) ? 'off' : 'false'); $input.datepicker(options); }); } // Issue #2983363: Datepicker is being detached when multiple files are // uploaded. /* }, detach: function (context, settings, trigger) { if (trigger === 'unload') { $(context).find('input[data-drupal-date-format]').findOnce('datePicker').datepicker('destroy'); } } */ }; })(jQuery, Modernizr, Drupal);