Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form theming datetime widget Symfony 2

Tags:

twig

symfony

I like to 'form-theme' my datetime widget in my form. I have created a fields.html.twig file with this in it:

{% block datetime_widget %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
        {{ '{{ day }}-{{ month }}-{{ year }}'|replace({
            '{{ day }}': form_widget(form.day),
            '{{ month }}': form_widget(form.month),
            '{{ year }}': form_widget(form.year),
        })|raw }}
        {{ form_widget(form.hour, { 'attr': { 'size': '1' } }) }} : {{ form_widget(form.minute, { 'attr': { 'size': '1' } }) }} : {{ form_widget(form.second, { 'attr': { 'size': '1' } }) }}
    </div>
{% endspaceless %}
{% endblock datetime_widget %}

I've entered this line in my form view template

{% form_theme form 'AcmeDashboardBundle:Form:fields.html.twig' %}

The datetime widget gets rendered. But the date and time parts are in a separate div element. Which breaks the widget in 2 lines. I'd like to display the date and time part next to each other.

like image 219
mattyh88 Avatar asked Mar 14 '12 19:03

mattyh88


1 Answers

To achieve this you must redefine either the datetime_widget without using the built in date_widget & time_widget (because they are each wrapped with divs) or you can redefine the date_widget & time_widget to remove their wrapping divs.

Here's how to implement the first option:

{% extends 'form_div_layout.html.twig' %}

{% block datetime_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}1
        {{ block('field_widget') }}
    {% else %}
        <div {{ block('widget_container_attributes') }}>
            {{ form_errors(form.date.year) }}
            {{ form_errors(form.date.month) }}
            {{ form_errors(form.date.day) }}
            {{ form_errors(form.time) }}
            {{ form_widget(form.date.year) }}
            {{ form_widget(form.date.month) }}
            {{ form_widget(form.date.day) }}
        {{ form_widget(form.time.hour, { 'attr': { 'size': '1' } }) }}:{{ form_widget(form.time.minute, { 'attr': { 'size': '1' } }) }}
        </div>
    {% endif %}
{% endspaceless %}
{% endblock datetime_widget %}

And here's how to implement the second option:

{% extends 'form_div_layout.html.twig' %}

{% block date_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {{ block('field_widget') }}
    {% else %}
        {{ date_pattern|replace({
            '{{ year }}':  form_widget(form.year),
            '{{ month }}': form_widget(form.month),
            '{{ day }}':   form_widget(form.day),
        })|raw }}
    {% endif %}
{% endspaceless %}
{% endblock date_widget %}

{% block time_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {{ block('field_widget') }}
    {% else %}
        {{ form_widget(form.hour, { 'attr': { 'size': '1' } }) }}:{{ form_widget(form.minute, { 'attr': { 'size': '1' } }) }}{% if with_seconds %}:{{ form_widget(form.second, { 'attr': { 'size': '1' } }) }}{% endif %}
    {% endif %}
{% endspaceless %}
{% endblock time_widget %}

Then the date & time will be together in the same div. Obviously you could add some space between the date and time by adding in your desired html

Hope that helps!

like image 102
user1207727 Avatar answered Oct 20 '22 16:10

user1207727