How to solve Symfony 5 exception: Cannot use the "format" option of "Symfony\Component\Form\Extension\Core\Type\DateType" when the "html5" option is enabled

How to solve Symfony 5 exception: Cannot use the "format" option of "Symfony\Component\Form\Extension\Core\Type\DateType" when the "html5" option is enabled

In the last days, i upgraded a Symfony 4 project to Symfony 5. Most of the stuff remained compatible and it was quite easier to upgrade, however there were a couple of things that threw exceptions, including an error inside some of my FormTypes.

The FormTypes that included date fields threw the following exception: Cannot use the "format" option of "Symfony\Component\Form\Extension\Core\Type\DateType" when the "html5" option is enabled. Well, there was for sure no html5 option at sight in the configuration of my DateType field:

<?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

// Importing DateType
use Symfony\Component\Form\Extension\Core\Type\DateType; 

class TemplatesType extends AbstractType
{
    // ... 

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        // This throws the exception
        $builder
            ->add('datePublished', DateType::class, [
                'widget'=>'single_text',
                'format' => 'yyyy-MM-dd HH:mm',
            ])
        ;
    }

    // ...
}

So in the first 5 minutes, i couldn't realize what was happening and what could i do to avoid this exception from appearing (besides of changing the type of my Date field). After a while, i started reading the documentation of the FormTypes of Symfony 5 and quickly realized the mistake.

Solution

As my DateType widget uses the single_text widget, so i'm able to initialize a JavaScript based Datepicker on the frontend later, when the renderer tries to generate the HTML of the field, if the type of the field is single_text and the html5 option is enabled (which is always set to true automatically), the exception is thrown. 

To solve this problem in your FormType, you only need to disable the html5 property like this:

$builder
    ->add('datePublished', DateType::class, [
        // 1. Keep your single_text widget
        'widget'=>'single_text',
        'format' => 'yyyy-MM-dd HH:mm',

        // 2. Disable HTML5 option
        'html5' => false
    ])
;

For example:

<?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

// Importing DateType
use Symfony\Component\Form\Extension\Core\Type\DateType; 

class TemplatesType extends AbstractType
{
    // ... 

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('datePublished', DateType::class, [
                'widget'=>'single_text',
                'format' => 'yyyy-MM-dd HH:mm',

                // Solution to the exception
                'html5' => false
            ])
        ;
    }

    // ...
}

By doing this, you should be able now to see your view on the browser without this exception.

Happy coding ❤️!

This could interest you

Become a more social person