DateTimeType & Data "Transforming"

I have a project (Symfony 6.0.4 ) with a form bound to an entity that has a date field. Symfony is guessing Date (correctly, of course) and I am using the widget => single_text option to render the field as an HTML5 date input. When I select a date with my browser's datepicker and submit, and the POSTed value is something like "2022-02-24", I get the validation error "This value should be of type string." Any idea why? It certainly <i>is</i> a string.

In the form class I am saying: $builder->add('date',DateType::class, ['widget'=>'single_text','empty_data'=>''])

In the underlying entity:

/**
 * @ORM\Column(type="date")
 * @Assert\NotBlank(message="date is required")
 * @Assert\Date(message="a valid date is required")
 */
private $date;```


And in the template, I am rendering the field with 
`form_widget(form.date)`



Thanks!

I have a form with an email field of type EmailType::class, but when I submit the form, $form->isValid() returns true even if the value of the email field is not a valid email address (no "@"). How come?

Using Symfony/Forms 4.4. When I tried to add widget as an option I get an error saying that widget is not an option that is available. Did I miss something when I did the composer require that makes this an option?

<b>Goal:</b>
I need a field "time spent to write an article".
The form does have two fields, hours and minutes.

But the hours can exceed 24, so it is possible that the user enters 99 hours and 59 minutes.
Since TimeType cant do this and DateTimeType (like in this tutorial) seems to be like a "hacky solution", I chose DateIntervalType (I think this is best practise?).

My form:

->add('timeSpent', DateIntervalType::class, [
                'widget'      => 'integer', // render a text field for each part
                // 'input'    => 'string',  // if you want the field to return a ISO 8601 string back to you
                // customize which text boxes are shown
                'with_years'  => false,
                'with_months' => false,
                'with_days'   => false,
                'with_hours'  => true,
                'with_minutes' => true,
//Not working: 'empty_data' => 0,
                'required' => false
            ])

This field is 100% optional, but should NOT be prefilled with 00:00 on the front end (which would work), because the field is easier to "forget" if its prefilled on the front end.
So on the front end, it should be empty unless the user typed something in.

<b>Problem:</b>
Even if I set required = false, I get an transformation failed exception if the two fields (hours & minutes) are empty:

Symfony\Component\Validator\ConstraintViolation {#1949 ▼
  -message: "This value is not valid."
  -messageTemplate: "This value is not valid."
  -parameters: [▶]
  -plural: null
  -root: Symfony\Component\Form\Form {#1412 ▶}
  -propertyPath: "children[spendTime].children[hours]"
  -invalidValue: ""
  -constraint: Symfony\Component\Form\Extension\Validator\Constraints\Form {#1605 …}
  -code: "1dafa156-89e1-4736-b832-419c2e501fca"
  -cause: Symfony\Component\Form\Exception\TransformationFailedException {#1559 …}```


<b>Question:</b>
How can I define a DateIntervalType with two empty fields (for hours & minutes, if the user doesn't type in anything on the front end) without a transformation failed exception from SF?
(Because it seems that SF cant handle an empty string even if required = false? Is this maybe even a SF bug?)

The only possible solution I've found at this time is to set:
'data' => new \DateInterval('P0Y'),

But I don't want to have 00:00 on the front end.

If we do not set a type and leave it for guessing, does it slows down performance on each page load, or it is cached and so only on cache build?

Actually Chrome Browser renders a Text Field instead of the expected Date and Time dropdowns if set no type and options.

Version 78.0.3904.108 (November 2019)

Warning, Mozilia does not support the calendar widget.
https://developer.mozilla.o...

I have done something a little bit advanced compared to the tutorial, but I have a problem with that, the idea is ok but actually doens't work.

I have build a FilterFrom that I'll use to filter my articles, and is built like that:

`public function buildForm(FormBuilderInterface $builder, array $options)

{
    $builder
        ->add('date1', DateType::class, [
            'widget' => 'single_text',
            // this is actually the default format for single_text
            'attr' => ['class' => 'form-control datetimepicker-input',  'data-target' => '#datetimepicker7'],
            'html5' => false,
            'required' => false,
        ])
        ->add('date2', DateType::class, [
            'widget' => 'single_text',
            // this is actually the default format for single_text
            'attr' => ['class' => 'form-control datetimepicker-input',  'data-target' => '#datetimepicker8'],
            'html5' => false,
        ])
        ->add('text', null)
        ->add('tag', EntityType::class, [
            'class' => Tag::class,
            'choices' => $this->tagRepository->findAllTagsAlphabetical(),
            'choice_label' => 'name',
            'by_reference' => false,

        ]);
}`

I want to use datatimepicker7-8 which are the one who are linked one to another so you can select a interval between 2 dates, the template look like this:

           ` {{ form_start(filterForm, {'attr': {'novalidate': 'novalidate', class: 'form-horizontal collapse in', id: 'content-viewer-list-filters_1'}}) }}

            <div class="col-lg-12 col-md-8 col-sm-12 col-xs-12 calendario">
                <div class="filtri-ricerca-item">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <div class="form-control">
                                {{ form_label(filterForm.date1, {'attr': {'for': 'from_frm'}})}}
                                <div class="input-group date" id="datetimepicker7" data-target-input="nearest">
                                {{ form_widget(filterForm.date1) }}
                                    <div class="input-group-append" data-target="#datetimepicker7"
                                         data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
                                    </div>
                                <small>{{ form_help(filterForm.date1) }}</small>
                                <div class="form-error">
                                    {{ form_errors(filterForm.date1) }}
                                </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <div class="form-control">
                                {{ form_label(filterForm.date1, {'attr': {'for': 'from_frm'}})}}
                                <div class="input-group date" id="datetimepicker8" data-target-input="nearest">
                                    {{ form_widget(filterForm.date2) }}
                                    <div class="input-group-append" data-target="#datetimepicker8"
                                         data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
                                    </div>
                                    <small>{{ form_help(filterForm.date2) }}</small>
                                    <div class="form-error">
                                        {{ form_errors(filterForm.date2) }}
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>
            <div class="col-lg-12 col-md-8 col-sm-12 col-xs-12 calendario">

                <div class="filtri-ricerca-item">
                    <div class="row">
                        <div class="col-lg-6 col-md-4 col-md-4 col-sm-12 col-xs-12">

                            {{ form_row(filterForm.text) }}

                        </div>

                        <div class="col-lg-6 col-md-4 col-md-4 col-sm-12 col-xs-12">

                            {{ form_row(filterForm.tag) }}

                        </div>
                    </div>
                </div>
            </div>

        <!--</fieldset>-->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <button type="submit" class="btn btn-primary" formnovalidate>Imposta</button>
            <input type="reset" value="Reset" class="btn" id="clearfilter_1"/>
        </div>
    {{ form_end(filterForm) }}

`
I tried to adjust everything in a way that could work, but I get the error:
An exception has been thrown during the rendering of a template ("Notice: Array to string conversion") in "bootstrap_4_layout.html.twig".

Js:
`
<script src={{ asset('js/moment.js') }}></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#datetimepicker7').datetimepicker();
        $('#datetimepicker8').datetimepicker({
            useCurrent: false
        });
        $("#datetimepicker7").on("change.datetimepicker", function (e) {
            $('#datetimepicker8').datetimepicker('minDate', e.date);
        });
        $("#datetimepicker8").on("change.datetimepicker", function (e) {
            $('#datetimepicker7').datetimepicker('maxDate', e.date);
        });
    });
</script>

`
Can you help me?
P.S: I'm not using encore