13

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.

1 Answer 1

11

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!

6
  • Thx for the reply! It's telling me that "Variable 'date_pattern' does not exist"
    – mattyh88
    Commented Mar 14, 2012 at 21:12
  • aha, yes it would normally get that from symfony's DateType class. It just specifies the format of the date, so you can replace the variable with '{{ year }}-{{ month }}-{{ day }}', or rearrange as you like Commented Mar 14, 2012 at 21:21
  • Am getting this error now: A hash key must be followed by a colon (:). Unexpected token "punctuation" of value "(" ("punctuation" expected with value ":") (I've edited my first post)
    – mattyh88
    Commented Mar 14, 2012 at 21:40
  • Solved above problem. But now I'm getting: Method "day" for object "Symfony\Component\Form\FormView" does not exist
    – mattyh88
    Commented Mar 14, 2012 at 21:55
  • Yes that's what I'm getting too. Still investigating :) Commented Mar 14, 2012 at 22:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.