Issue #1835016 by googletorp, nod_, KarenS, Sharique, Nitesh Sethia,...

Issue #1835016 by googletorp, nod_, KarenS, Sharique, Nitesh Sethia, mpdonadio: Polyfill date input type

core/core.libraries.yml

@@ -133,6 +133,15 @@ drupal.collapse:
     - core/drupal.form
     - core/jquery.once
 
+drupal.date:
+  version: VERSION
+  js:
+    misc/date.js: {}
+  dependencies:
+    - core/drupal
+    - core/modernizr
+    - core/jquery.ui.datepicker
+
 drupal.debounce:
   version: VERSION
   js:

core/lib/Drupal/Core/Datetime/Element/Datetime.php

@@ -268,6 +268,7 @@ public static function processDatetime(&$element, FormStateInterface $form_state
         '#required' => $element['#required'],
         '#size' => max(12, strlen($element['#value']['date'])),
         '#error_no_message' => TRUE,
+        '#date_date_format' => $element['#date_date_format'],
       );
 
       // Allows custom callbacks to alter the element.

core/lib/Drupal/Core/Render/Element/Date.php

@@ -7,6 +7,7 @@
 
 namespace Drupal\Core\Render\Element;
 
+use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Render\Element;
 
 /**
@@ -26,22 +27,47 @@ class Date extends FormElement {
    */
   public function getInfo() {
     $class = get_class($this);
-    return array(
+    return [
       '#input' => TRUE,
       '#theme' => 'input__date',
-      '#pre_render' => array(
-        array($class, 'preRenderDate'),
-      ),
-      '#theme_wrappers' => array('form_element'),
-    );
+      '#process' => [[$class, 'processDate']],
+      '#pre_render' => [[$class, 'preRenderDate']],
+      '#theme_wrappers' => ['form_element'],
+    ];
+  }
+
+  /**
+   * Processes a date form element.
+   *
+   * @param array $element
+   *   The form element to process. Properties used:
+   *   - #attributes: An associative array containing:
+   *     - type: The type of date field rendered.
+   *   - #date_date_format: The date format used in PHP formats.
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The current state of the form.
+   * @param array $complete_form
+   *   The complete form structure.
+   *
+   * @return array
+   *   The processed element.
+   */
+  public static function processDate(&$element, FormStateInterface $form_state, &$complete_form) {
+    // Attach JS support for the date field, if we can determine which date
+    // format should be used.
+    if ($element['#attributes']['type'] == 'date' && !empty($element['#date_date_format'])) {
+      $element['#attached']['library'][] = 'core/drupal.date';
+      $element['#attributes']['data-drupal-date-format'] = [$element['#date_date_format']];
+    }
+    return $element;
   }
 
   /**
    * Adds form-specific attributes to a 'date' #type element.
    *
    * Supports HTML5 types of 'date', 'datetime', 'datetime-local', and 'time'.
-   * Falls back to a plain textfield. Used as a sub-element by the datetime
-   * element type.
+   * Falls back to a plain textfield with JS datepicker support. Used as a
+   * sub-element by the datetime element type.
    *
    * @param array $element
    *   An associative array containing the properties of the element.

core/misc/date.js

+/**
+ * @file
+ * Polyfill for HTML5 date input.
+ */
+
+(function ($, Modernizr, Drupal) {
+
+  "use strict";
+
+  /**
+   * 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);
+      // 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 () {
+        var $input = $(this);
+        var datepickerSettings = {};
+        var 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: function (context, settings, trigger) {
+      if (trigger === 'unload') {
+        $(context).find('input[data-drupal-date-format]').findOnce('datePicker').datepicker('destroy');
+      }
+    }
+  };
+
+})(jQuery, Modernizr, Drupal);