3

There is no configuration option available in the backoffice nor from configuration synchronisation variables that allows to edit the settings for the jQuery datepicker widget embed in core.

My question is: how to select years and months in Drupal 8 core's date picker widget ?

By default years and months can only be changed by slowly navigating through adjacent months with left and right arrows.

4

From locating the core datepicker source code in core/modules/locale/locale.datepicker.js, I was able to inspect the $.datepicker object.

Then _defaults settings can be altered in a custom javascript fil as easy as:

(function ($) {
    Drupal.behaviors.alterDatePicker = {
        attach: function (context, settings) {
            $.datepicker._defaults.changeMonth = true;
            $.datepicker._defaults.changeYear = true;
        }
    };
})(jQuery);

All datepicker settings are documented here: http://api.jqueryui.com/datepicker/#option-changeMonth

|improve this answer|||||
1

Here is @B2F's great & correct answer in complete(ish) module form:

better_datepicker/better_datepicker.info.yml

name: 'Better Datepicker'
type: module
description: 'select year and month on datetime fields'
package: "Date"
core: 8.x

#CSS & JS
libraries:
  - 'better_datepicker/better-datepicker'

better_datepicker/better_datepicker.libraries.yml

better-datepicker:
  version: 1.x
  js:
    js/better-datepicker.js: {}
  dependencies:
    - core/jquery
    #- core/drupalSettings

better_datepicker/better_datepicker.module

<?php

function better_datepicker_element_info_alter(array &$types) {
    if (isset($types['datetime'])) {
        $types['datetime']['#attached']['library'][] = 'better_datepicker/better-datepicker';
    }
}

better_datepicker/js/better-datepicker.js

(function ($) {
    Drupal.behaviors.alterDatePicker = {
        attach: function (context, settings) {
            $.datepicker._defaults.changeMonth = true;
            $.datepicker._defaults.changeYear = true;
            // adjust year range
            $.datepicker._defaults.yearRange = "c-80:c+10";
        }
    };
})(jQuery);
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.