Django-crispy-forms: set CSS class for parent parent AddendedText

Question

Forms:

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 form:

        ...
        <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>
        ...

To use the calendar icon as the bootstrap-datepicker startup , I need to add a new class date in<div class="input-group"> .

How can I achieve this with django-crispy shapes?

Currently, the AppendedText attribute css_class located on the INPUT element is not a parent DIV.

Tnx!

Answer 1

you can use

self.helper.field_class = 'input-group'

this will create a css class with 'input-group' for all fields of this form.

Answer 2

Use the following javascript:

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

div div 'input-group'. Bootstrap-datetimepicker 'date' div 'input-group'.

Answer 3

Daria 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'
),

Then I wrapped it directly through id instead of relying on a function closest.

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

Note. Crispy forms will create an element with a name div_id_start_datefor the group of forms, so you need to call the outer div with something else.