How to add select years and months select Drupal 8.1 date picker?

Question

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.

Answer 1

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

Answer 2

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);