表单主题日期时间小部件 Symfony 2 [英] Form theming datetime widget Symfony 2

问题描述

我喜欢在我的表单中表单主题"我的日期时间小部件.我创建了一个 fields.html.twig 文件，其中包含:

{% 阻止 datetime_widget %}{% 无空间 %}<div {{ block('widget_container_attributes') }}>{{ '{{ 日 }}-{{ 月 }}-{{ 年 }}'|replace({'{{ day }}': form_widget(form.day),'{{月 }}': form_widget(form.month),'{{ year }}': form_widget(form.year),})|原始}}{{ form_widget(form.hour, { 'attr': { 'size': '1' } }) }} : {{ form_widget(form.minute, { 'attr': { 'size': '1' } }) }} : {{ form_widget(form.second, { 'attr': { 'size': '1' } }) }}

{% endspaceless %}{% endblock datetime_widget %}

我已经在表单视图模板中输入了这一行

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

日期时间小部件被渲染.但是日期和时间部分位于单独的 div 元素中.这将小部件分为 2 行.我想显示彼此相邻的日期和时间部分.

解决方案

要实现这一点，您必须重新定义 datetime_widget 而不使用内置的 date_widget &time_widget (因为它们每个都用 div 包裹)或者您可以重新定义 date_widget &time_widget 删除它们的包装 div.

以下是实现第一个选项的方法:

{% 扩展 'form_div_layout.html.twig' %}{% 阻止 datetime_widget %}{% 无空间 %}{% if widget == 'single_text' %}1{{ 块('field_widget')}}{％ 别的 ％}<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' } }) }}

{％ 万一 ％}{% endspaceless %}{% endblock datetime_widget %}

这里是如何实现第二个选项:

{% 扩展 'form_div_layout.html.twig' %}{% 阻止 date_widget %}{% 无空间 %}{% if widget == 'single_text' %}{{ 块('field_widget')}}{％ 别的 ％}{{ 日期模式|替换({'{{ year }}': form_widget(form.year),'{{月 }}': form_widget(form.month),'{{ day }}': form_widget(form.day),})|原始}}{％ 万一 ％}{% endspaceless %}{% endblock date_widget %}{% 块 time_widget %}{% 无空间 %}{% if widget == 'single_text' %}{{ 块('field_widget')}}{％ 别的 ％}{{ 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 %}{％ 万一 ％}{% endspaceless %}{% endblock time_widget %}

然后日期 &时间将在同一个 div 中.显然，您可以通过添加所需的 html 在日期和时间之间添加一些空格

希望有帮助！

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!

这篇关于表单主题日期时间小部件 Symfony 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！