Wrong date field format in Chrome

Question

I am working on a form.

I have this date field:

$form['date'] = [
  '#type' => 'date',
  '#title' => $this->t('Date:'),
  '#attributes' => [
    'type' => 'date',
    'placeholder' => 'dd/mm/aaaa',
    'data-drupal-date-format' => ['d/m/Y'],
  ],
  '#date_date_format' => 'd/m/Y'
];

When I set the date to August 30, 2017 I get

Firefox (Excellent!):

Chrome (Wrong!):

How can I set the 'd/m/Y' format in Chrome?

Answer 1

In Drupal 8, the date form element uses the HTML5 date input format by default. Chrome is one of the browsers that support this. So, it looks like your browser is using US style dates.

Changing to

$form['date'] = [
  '#type' => 'date',
  '#title' => $this->t('Date:'),
  '#attributes' => [
    'type' => 'text', // <=== CHANGE THIS
    'placeholder' => 'dd/mm/aaaa',
    'data-drupal-date-format' => ['d/m/Y'],
  ],
  '#date_date_format' => 'd/m/Y'
];

should work, but I would recommend using a datetime element and configuring it for date-only inputs. You can also configure that to not use the HTML5 inputs.

Answer 2

I think there is a type error '#date_date_format' => 'd/m/Y' which should be '#date_format' => 'd/m/Y'