phpsymfony

Add a class to each select of DateTimeType in a symfony form


Here is the form type that I have: // src/Form/Type/TaskType.php

namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use App\Entity\Task;

class TaskType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('task', TextType::class, array(
                    'attr' => ['class' => 'myclass'],
                )
            )
            ->add(
                'dueDate', DateType::class, array(
                    'attr' => ['class' => 'myclass'],
                )
            )
            ->add('save', SubmitType::class)            
        ;

    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Task::class,
        ]);
    }

}

Here is the view:

{# templates/task/new.html.twig #}
<div class="form-control">
    {{ form_label(form.task) }}
    {{ form_widget(form.task) }}

    <small>{{ form_help(form.task) }}</small>

    <div class="form-error">
        {{ form_errors(form.task) }}
    </div>  
    <i class="fa fa-calendar"></i> {{ form_label(form.dueDate) }}
    {{ form_widget(form.dueDate) }}

    <small>{{ form_help(form.dueDate) }}</small>

    <div class="form-error">
        {{ form_errors(form.dueDate) }}
    </div>
</div>

The class "myclass" is added to the div containing all the select boxes and I want it to be applied to each select. If it is not possible to configure that in the form type there must be a way to break down the statement "form_widget(form.dueDate)" in the view so that I can pass the class to each select, and I cannot find that in the documentation.

Thanks


Solution

  • If we speak about DateTimeType, then you can use the following example:

    = form_widget(form.dueDate.date, { attr: { class: 'myclass' } }) 
    = form_widget(form.dueDate.time, { attr: { class: 'myclass' } })
    

    Otherwise DateType can be split like:

    = form_widget(form.dueDate.day, { attr: { class: 'myclass' } }) 
    = form_widget(form.dueDate.month, { attr: { class: 'myclass' } })
    = form_widget(form.dueDate.year, { attr: { class: 'myclass' } })