summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-07-06 12:51:32 (GMT)
committerAlex Pott2015-07-06 12:51:32 (GMT)
commitb04d55edfe1d9f512207004b3da89cabb0ccbf6f (patch)
treec46011364aaa5d600ea7bcdb01ac4f2f6e660e7b
parenta9dd72b1bd653685516efea9b275763628d35596 (diff)
Issue #1835016 by googletorp, nod_, KarenS, Sharique, Nitesh Sethia, mpdonadio: Polyfill date input type
-rw-r--r--core/core.libraries.yml9
-rw-r--r--core/lib/Drupal/Core/Datetime/Element/Datetime.php1
-rw-r--r--core/lib/Drupal/Core/Render/Element/Date.php42
-rw-r--r--core/misc/date.js56
4 files changed, 100 insertions, 8 deletions
diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index cc8e2aa..cfbaf47 100644
--- a/core/core.libraries.yml
+++ b/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:
diff --git a/core/lib/Drupal/Core/Datetime/Element/Datetime.php b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
index b8e4b69..f9ccb45 100644
--- a/core/lib/Drupal/Core/Datetime/Element/Datetime.php
+++ b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
@@ -268,6 +268,7 @@ class Datetime extends DateElementBase {
'#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.
diff --git a/core/lib/Drupal/Core/Render/Element/Date.php b/core/lib/Drupal/Core/Render/Element/Date.php
index 8585cb3..e20b51c 100644
--- a/core/lib/Drupal/Core/Render/Element/Date.php
+++ b/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.
diff --git a/core/misc/date.js b/core/misc/date.js
new file mode 100644
index 0000000..fe2a239
--- /dev/null
+++ b/core/misc/date.js
@@ -0,0 +1,56 @@
+/**
+ * @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);