Django-хрустящие-формы: установить класс CSS для AppendedText родительского DIV

Question

Формы:

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 триггер Мне нужно добавить новый класс <div class="input-group">.

Как достичь этого с помощью django-crispy-forms?

В настоящее время атрибуту, AppendedText «s css_class к применяют указанные входной элемент не родительский DIV.

Tnx!

Answer 1

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

self.helper.field_class = 'input-group' 

это будет генерировать класс CSS с «ввода-группы» для всех полей в этой форме.

Answer 2

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

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

Ближайший DIV будет ДИВ на 'вход-группы'. Bootstrap-datetimepicker позаботится о добавлении класса 'date' в div 'input-group'.

Answer 3

Опираясь на Daria's answer, я передал идентификатор (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 для формы группы, так что вы должны вызывать внешнее Диво что-то другое.