--- /dev/null
+/**
+ * @file
+ * Polyfill for HTML5 date input.
+ */
+
+(function ($, Modernizr, Drupal) {
+ /**
+ * 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(context, settings) {
+ const $context = $(context);
+ // Skip if date are supported by the browser.
+ if (Modernizr.inputtypes.date === true) {
+ return;
+ }
+ $context.find('input[data-drupal-date-format]').once('datePicker').each(function () {
+ const $input = $(this);
+ const datepickerSettings = {};
+ const dateFormat = $input.data('drupalDateFormat');
+ // The date format is saved in PHP style, we need to convert to jQuery
+ // datepicker.
+ datepickerSettings.dateFormat = dateFormat
+ .replace('Y', 'yy')
+ .replace('m', 'mm')
+ .replace('d', 'dd');
+ // Add min and max date if set on the input.
+ if ($input.attr('min')) {
+ datepickerSettings.minDate = $input.attr('min');
+ }
+ if ($input.attr('max')) {
+ datepickerSettings.maxDate = $input.attr('max');
+ }
+ $input.datepicker(datepickerSettings);
+ });
+ },
+ detach(context, settings, trigger) {
+ if (trigger === 'unload') {
+ $(context).find('input[data-drupal-date-format]').findOnce('datePicker').datepicker('destroy');
+ }
+ },
+ };
+}(jQuery, Modernizr, Drupal));