Django-crispy-forms: установить класс CSS для родительского div AppendedText

Формы:

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.

Спасибо!


django django-forms django-crispy-forms
person Lufa    schedule 11.10.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете использовать

self.helper.field_class = 'input-group'

это создаст класс css с «группой ввода» для всех полей в этой форме.

person jcadam    schedule 26.11.2013

arrow_upward
1
arrow_downward

Используйте следующий javascript:

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

Ближайшим div будет div input-group. Bootstrap-datetimepicker позаботится о добавлении класса date в div input-group.

person Daria    schedule 20.06.2014

arrow_upward
1
arrow_downward

Основываясь на ответе Дарьи, я передал идентификатор (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'
),

Затем я обернул это напрямую через идентификатор вместо того, чтобы полагаться на функцию closest.

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

Примечание. Хрустящие формы создадут элемент с именем div_id_start_date для группы форм, поэтому вам нужно назвать внешний элемент div как-то иначе.

person Conor Svensson    schedule 03.10.2015