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.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With