Django-crispy-forms：为 AppendedText 父 div 设置 CSS 类

Posted 2023-02-24

【中文标题】Django-crispy-forms：为 AppendedText 父 div 设置 CSS 类

【英文标题】：Django-crispy-forms: set CSS class for AppendedText parent div

【发布时间】：2013-10-19 12:04:45

【问题描述】：

表格：

class StartEndDateEpayOperatorsForm(forms.Form):

    ...

    def __init__(self, *args, **kwargs):
        super(StartEndDateEpayOperatorsForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()

        ...

        self.helper.layout = Layout(
            AppendedText('start_date', '<span class="glyphicon glyphicon-calendar"></span>', active=True, css_class='date'),
            ...
        )

表单 HTML：

        ...
        <div class="input-group">
            <input id="id_start_date" type="text" class="date dateinput form-control" value="2013-10-01" name="start_date"> 
            <span class="input-group-addon active">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
         </div>
        ...

为了使用日历图标作为bootstrap-datepicker触发器我需要添加新类date到<div class="input-group"> 。

我怎样才能用 django-crispy-forms 实现它？

目前 AppendedText 的属性 css_class 应用于 INPUT 元素而不是父 DIV。

Tnx！

【参考方案1】：

你可以使用

self.helper.field_class = 'input-group'

这将为此表单中的所有字段生成带有“输入组”的 css 类。

【参考方案2】：

使用以下javascript：

 $('.datetimeinput').closest('div').datetimepicker();

最近的 div 将是“输入组”div。 Bootstrap-datetimepicker 将负责将“日期”类添加到“输入组”div。

【参考方案3】：

在Daria's answer 的基础上，我将一个 id (div_id_start_date_container) 传递到容器 div 中，如下所示：

Div(AppendedText('start_date', 
                 '<span class="glyphicon glyphicon-calendar" </span>', active=True),
    css_class='date col-sm-4 col-sm-offset-1',
    css_id='div_id_start_date_container'
),

然后我直接通过 id 包装它，而不是依赖 closest 函数。

$('#div_id_start_date_container').datepicker(
        format: "yyyy-mm-dd",
        autoclose: true,
        todayHighlight: true
    
);

注意 - Crispy 表单将为表单组创建一个名为 div_id_start_date 的元素，因此您需要将外部 div 称为不同的名称。