Rendering Semester & Year in Symfony Form

Introduction

In a form I’m working on recently, I needed to show the following information (see screenshot below) in a Symfony form:

It’s from a paper form, and I’m converting to electronic. Since the semester is supposed to be circled, this means using a drop-down list allowing selecting only one item; and instead of filling in the year, have a drop-down list with a reasonable range of years.

Form Type Code

In Symfony, you normally create Form classes, and because the above dates don’t map back to an Entity attribute, I set ‘mapped’ to false in the FieldTypes that I use. So for the above, I used a ChoiceType for the semester, and a DateType for the year. I happen to show the form elements in a table, and because the elements need to appear on the same row, I need to use a CSS style of “float:left”. The resultant code looks something like this:

class ApplicationType extends AbstractType
{
   public function buildForm(FormBuilderInterface $builder, array $options)
   {
      $builder
         ...
         ->add('target', ChoiceType::class, array(
            'mapped' => false,
            'expanded' => false,
            'multiple' => false,
            'label' => 'Target final semester at Taft College: (If unsure, approximate.)',
            'choices' => array(
               'Fall' => 'fall',
               'Spring' => 'spring',
               'Summer' => 'summer',
            ),
            'attr' => array(
               'style' => 'float:left',
            ),
         ))
         ->add('target_date', DateType::class, array(
            'mapped' => false,
            'format' => 'dd MMM y',
            'label' => 'year:',
            'label_attr' => array(
               'id' => 'target_date',
               'style' => 'float:left;margin-left:8px',
            ),
            'years' => range(2025,2017,1),
            'attr' => array(
               'style' => 'float:left',
            ),
         ))
      ...
      ;
   }
}

You’ll notice that for the format option, I had to use “dd MMM y”. If you use something like “yyyy” instead, you get this kind of Symfony exception error message:

The “format” option should contain the letters “y”, “M” and “d”. Its current value is “yyyy”.

So, in other words, so you have to use each of year, month, and date placeholders for the format specification.

Presenting Properly in Twig

Unfortunately, the above code will also show the date and the month of the “target_date” form element. The best thing to do is hide both of them. This can be done by using CSS “display:none” again.

Here is the Twig code I used to render correctly:

<tr><td>{{ form_label(form.target) }}</td></tr>
   {{ form_widget(form.target_date['day'],{'attr':{'style':'display:none'}}) }}
   {{ form_widget(form.target_date['month'],{'attr':{'style':'display:none'}}) }}
<tr><td>{{ form_widget(form.target) }}
   {{ form_label(form.target_date) }}{{ form_widget(form.target_date['year']) }}</td></tr>

You’ll notice in the above code, I rended the “target” label in one row, then I hide the day and month “target_date” widgets by setting each of their attributes, and then on another row I show the “target” widget and then the “target_date” label followed by only the “target_date” year. This effectively shows the semester and year side by side.

The result is like in the following screenshot: