I created a form with Drupal's FAPI. The form includes two date fields. It works fine on desktop browser.

But on mobile (iOS and Android), the datepicker doesn’t show up. It is the native date selector which shows up.

The issue is that the native date selector doesn’t seem to apply the date format (in my case : '#date_date_format' => 'd/m/Y')

I see 2 possible solutions :

  1. With JS, force the date format
  2. Force the date picker to show up (i’ve seen this on other website i’ve made but in wasn’t Drupal FAPI.

How do you handle this problem ?

Here is my code and a screen shot of the issue :

    $form['date_debut'] = array(
        '#type' => 'date',
        '#title' => $this->t('Date de début'),
        '#type' => 'date_popup',
        '#date_date_format' => 'd/m/Y',
        '#description' => t('Cliquez dans le champ et sélectionnez une date de début de congé dans le calendrier'),
        '#required' => TRUE

enter image description here

enter image description here


The solution is not to use :

<input type="date">


<input type="text">

With Form API, replace :

$form['my_date'] = array(
    '#type' => 'date',


$form['my_date'] = array(
    '#type' => 'textfield',

And attach a date picker like the jQuery Datepicker available in Drupal 8 or other library like Bootstrap Datepicker

In safari, i need to test in private mode because sometines the Safari cache prevents me to see update in my JS.

|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.