Date input field with datepicker

This is an alternate version of form-item--date that uses the jQuery UI Datepicker.

A variation of this component that also supports Select2 within the Datepicker can be found here.

Defining a date input field

In the form definition you can create a date input field as follows:

$form['start_date'] = [
  '#type' => 'date',
  '#title' => $this->t('Start date'),
  '#date_date_format' => 'd/m/Y',
];

Warning

This component doesn't work for logged-in users when the quick-edit module is enabled, because of conflicting JS.

Specifications

Machine name

form-item--date

Built upon

Drupal Core

Perks

Using Sass
Responsive
Using Drupal behaviours

Drawbacks

Uses jQuery
Not accessible

Building blocks

HTML
CSS
Javascript

Inspired by

Flat design

Stats

Public component
25 downloads
No open issue

Contributors