Support html 5 date month format

Created on 5 July 2025, 2 days ago

Problem/Motivation

Problem :

I'm creating a custom composite element containing a start date and an end date (Custom range date element). Those 2 dates must be in the format "Y-m".

Since the datepicker is not maintened anymore, this is not a viable solution.

I've firstly tried to work with the date element and pass the #attributes : "type" => "month" but it didn't work. Especially because the DateBase.php Element force the use of "type" => "date" : webform\src\Plugin\WebformElement\Date.php :

$element['#attributes']['type'] = 'date';

Then, I tried to use the Datelist element but I had trouble making it work with ajax and generaly speaking it was too much work/verification that is normaly handled by date elements.

Steps to reproduce

Create a custom webform element (such as a composite) : https://git.drupalcode.org/project/webform/-/tree/8.x-5.x/modules/webfor...

In the Element here : https://git.drupalcode.org/project/webform/-/blob/8.x-5.x/modules/webfor...

Add the following code in the getCompositeElements method :

$elements['start_date'] = [
      "#type" => "date",
      '#title' => "Start date",
      '#date_format' => 'Y-m',
      '#date_date_format' => 'Y-m',
      '#attributes' => [
        'type' => 'month',        
      ],
      '#date_date_max' => "-1 month",
      '#default_value' => date('Y-m', strtotime('-1 month')),
];

The form forces the element to be a normal date, and even if you force it as month it does not handle the value through the whole process.

Proposed resolution

I want to work with the type "month" in the html 5 date input such as :

<input type="month" id="start" name="start" min="2018-03" value="2018-05" />

(source : https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/inp... )

I've created the attached patch, it is a temporary solution so I can work with it and move on. I would not recommand to use it in production. On your own :D