Symfony2:日期小部件的背景颜色

时间:2012-12-16 17:23:22

标签: css forms symfony

对于包含日期字段小部件的模板,非日期输入字段将根据CSS更改其背景颜色。日期小部件上不会发生相同的情况。如何影响日期小部件的背景颜色? (在表单类中添加attr数组无效。)

(小但实际)差异的屏幕截图:enter image description here

代码示例: 模板:

    <td>{{ form_widget(form.fname, {'attr': {'class':'smallform'}}) }}
    <td>{{ form_widget(form.sname, {'attr': {'class':'smallform'}}) }}
    <td>{{ form_widget(form.dateAdded, {'attr': {'class':'smallform'} }) }}

表格类:

        ->add('fname', null, array('required' => false))
        ->add('sname', null, array('required' => false))
        ->add('dateAdded', 'date', array(
            'widget' => 'choice',
            'format' => 'MM/dd/yyyy',
            'pattern' => '{{ year }}-{{ month }}-{{ day }}',
            'years' => range(Date('Y'), Date('Y') - 5),
            'required' => false,
            'data' => date_create(),
        ))

CSS:

.smallform {
    background-color: #f5f5f5;
    font-size: 9pt;
    color: #000066;
    border: 1px solid #CCCC99;
}

2 个答案:

答案 0 :(得分:2)

一个不太微妙的解决方案:在我的应用程序的fields.html.twig的自定义副本中修改日期小部件。更精确的解决方案是为此定义一个特定的小部件,或者弄清楚如何将class属性一直保留到日期小部件中:

{% block date_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {{ block('form_widget_simple') }}
    {% else %}
        <div {{ block('widget_container_attributes') }}>
            {{ date_pattern|replace({
                '{{ year }}': form_widget(form.year, {'attr': {'class':'smallform'}}),
                '{{ month }}': form_widget(form.month, {'attr': {'class':'smallform'}}),
                '{{ day }}': form_widget(form.day, {'attr': {'class':'smallform'}}),
            })|raw }}
        </div>
    {% endif %}
{% endspaceless %}
{% endblock date_widget %}

答案 1 :(得分:0)

尝试:

    ->add('fname', null, array(
        'required' => false,
        'attr' => array('class' => 'smallform')
    ))
    ->add('sname', null, array(
        'required' => false,
        'attr' => array('class' => 'smallform')
    ))
    ->add('dateAdded', 'date', array(
        'attr' => array('class' => 'smallform'), // ADDED
        'widget' => 'choice',
        'format' => 'MM/dd/yyyy',
        'pattern' => '{{ year }}-{{ month }}-{{ day }}',
        'years' => range(Date('Y'), Date('Y') - 5),
        'required' => false,
        'data' => date_create(),
    ))

另外,view-source确保这些类实际上是在html标签中设置的,这可能是你的CSS的一个问题。

这些线路存在问题:
<td>{{ form_widget(form.fname, {'attr': {'class':'smallform'}}) }}</td>
我不认为你可以在整个小部件上设置一个类,仅针对单个行。 如果你需要通过树枝设置课程,你可以尝试这个。

<form action="" method="">
    {{ form_errors(form) }}
    {{ form_row(form.fname, { 'attr': {'class': 'smallform' } }) }}
    {{ form_row(form.sname, { 'attr': { 'class': 'smallform' } }) }}
    <div class="smallform">
        {{ form_row(form.dateAdded) }}
    </div>
    {{ form_rest(form) }}
    <input type="submit" name="submit" value="Submit" />
</form>