Chris@0: /**
Chris@0:  * @file
Chris@0:  * Polyfill for HTML5 date input.
Chris@0:  */
Chris@0: 
Chris@17: (function($, Modernizr, Drupal) {
Chris@0:   /**
Chris@0:    * Attach datepicker fallback on date elements.
Chris@0:    *
Chris@0:    * @type {Drupal~behavior}
Chris@0:    *
Chris@0:    * @prop {Drupal~behaviorAttach} attach
Chris@0:    *   Attaches the behavior. Accepts in `settings.date` an object listing
Chris@0:    *   elements to process, keyed by the HTML ID of the form element containing
Chris@0:    *   the human-readable value. Each element is an datepicker settings object.
Chris@0:    * @prop {Drupal~behaviorDetach} detach
Chris@0:    *   Detach the behavior destroying datepickers on effected elements.
Chris@0:    */
Chris@0:   Drupal.behaviors.date = {
Chris@0:     attach(context, settings) {
Chris@0:       const $context = $(context);
Chris@0:       // Skip if date are supported by the browser.
Chris@0:       if (Modernizr.inputtypes.date === true) {
Chris@0:         return;
Chris@0:       }
Chris@17:       $context
Chris@17:         .find('input[data-drupal-date-format]')
Chris@17:         .once('datePicker')
Chris@17:         .each(function() {
Chris@17:           const $input = $(this);
Chris@17:           const datepickerSettings = {};
Chris@17:           const dateFormat = $input.data('drupalDateFormat');
Chris@17:           // The date format is saved in PHP style, we need to convert to jQuery
Chris@17:           // datepicker.
Chris@17:           datepickerSettings.dateFormat = dateFormat
Chris@17:             .replace('Y', 'yy')
Chris@17:             .replace('m', 'mm')
Chris@17:             .replace('d', 'dd');
Chris@17:           // Add min and max date if set on the input.
Chris@17:           if ($input.attr('min')) {
Chris@17:             datepickerSettings.minDate = $input.attr('min');
Chris@17:           }
Chris@17:           if ($input.attr('max')) {
Chris@17:             datepickerSettings.maxDate = $input.attr('max');
Chris@17:           }
Chris@17:           $input.datepicker(datepickerSettings);
Chris@17:         });
Chris@0:     },
Chris@0:     detach(context, settings, trigger) {
Chris@0:       if (trigger === 'unload') {
Chris@17:         $(context)
Chris@17:           .find('input[data-drupal-date-format]')
Chris@17:           .findOnce('datePicker')
Chris@17:           .datepicker('destroy');
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@17: })(jQuery, Modernizr, Drupal);