3 * Polyfill for HTML5 date input.
6 (function($, Modernizr, Drupal) {
8 * Attach datepicker fallback on date elements.
10 * @type {Drupal~behavior}
12 * @prop {Drupal~behaviorAttach} attach
13 * Attaches the behavior. Accepts in `settings.date` an object listing
14 * elements to process, keyed by the HTML ID of the form element containing
15 * the human-readable value. Each element is an datepicker settings object.
16 * @prop {Drupal~behaviorDetach} detach
17 * Detach the behavior destroying datepickers on effected elements.
19 Drupal.behaviors.date = {
20 attach(context, settings) {
21 const $context = $(context);
22 // Skip if date are supported by the browser.
23 if (Modernizr.inputtypes.date === true) {
27 .find('input[data-drupal-date-format]')
30 const $input = $(this);
31 const datepickerSettings = {};
32 const dateFormat = $input.data('drupalDateFormat');
33 // The date format is saved in PHP style, we need to convert to jQuery
35 datepickerSettings.dateFormat = dateFormat
39 // Add min and max date if set on the input.
40 if ($input.attr('min')) {
41 datepickerSettings.minDate = $input.attr('min');
43 if ($input.attr('max')) {
44 datepickerSettings.maxDate = $input.attr('max');
46 $input.datepicker(datepickerSettings);
49 detach(context, settings, trigger) {
50 if (trigger === 'unload') {
52 .find('input[data-drupal-date-format]')
53 .findOnce('datePicker')
54 .datepicker('destroy');
58 })(jQuery, Modernizr, Drupal);