Commit b04d55ed authored by alexpott's avatar alexpott

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

Issue #1835016 by googletorp, nod_, KarenS, Sharique, Nitesh Sethia, mpdonadio: Polyfill date input type
parent a9dd72b1
...@@ -133,6 +133,15 @@ drupal.collapse: ...@@ -133,6 +133,15 @@ drupal.collapse:
- core/drupal.form - core/drupal.form
- core/jquery.once - core/jquery.once
drupal.date:
version: VERSION
js:
misc/date.js: {}
dependencies:
- core/drupal
- core/modernizr
- core/jquery.ui.datepicker
drupal.debounce: drupal.debounce:
version: VERSION version: VERSION
js: js:
......
...@@ -268,6 +268,7 @@ public static function processDatetime(&$element, FormStateInterface $form_state ...@@ -268,6 +268,7 @@ public static function processDatetime(&$element, FormStateInterface $form_state
'#required' => $element['#required'], '#required' => $element['#required'],
'#size' => max(12, strlen($element['#value']['date'])), '#size' => max(12, strlen($element['#value']['date'])),
'#error_no_message' => TRUE, '#error_no_message' => TRUE,
'#date_date_format' => $element['#date_date_format'],
); );
// Allows custom callbacks to alter the element. // Allows custom callbacks to alter the element.
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
namespace Drupal\Core\Render\Element; namespace Drupal\Core\Render\Element;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element; use Drupal\Core\Render\Element;
/** /**
...@@ -26,22 +27,47 @@ class Date extends FormElement { ...@@ -26,22 +27,47 @@ class Date extends FormElement {
*/ */
public function getInfo() { public function getInfo() {
$class = get_class($this); $class = get_class($this);
return array( return [
'#input' => TRUE, '#input' => TRUE,
'#theme' => 'input__date', '#theme' => 'input__date',
'#pre_render' => array( '#process' => [[$class, 'processDate']],
array($class, 'preRenderDate'), '#pre_render' => [[$class, 'preRenderDate']],
), '#theme_wrappers' => ['form_element'],
'#theme_wrappers' => array('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. * Adds form-specific attributes to a 'date' #type element.
* *
* Supports HTML5 types of 'date', 'datetime', 'datetime-local', and 'time'. * Supports HTML5 types of 'date', 'datetime', 'datetime-local', and 'time'.
* Falls back to a plain textfield. Used as a sub-element by the datetime * Falls back to a plain textfield with JS datepicker support. Used as a
* element type. * sub-element by the datetime element type.
* *
* @param array $element * @param array $element
* An associative array containing the properties of the element. * An associative array containing the properties of the element.
......
/**
* @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);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment