tutorial form example crispy bootstrap4 bootstrap django django-forms django-crispy-forms

example - Django-crispy-forms: establece la clase CSS para el div principal AppendedText



django crispy forms tutorial (3)

Puedes usar

self.helper.field_class = ''input-group''

esto generará clases css con ''input-group'' para todos los campos de esta forma.

Formularios:

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

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

Para utilizar el icono de calendario como desencadenador bootstrap-datepicker , necesito agregar una nueva fecha de clase a <div class="input-group"> .

¿Cómo puedo lograrlo con django-crispy-forms ?

En este momento, el atributo del AppendedText css_class se aplica al elemento INPUT, no al DIV padre.

Tnx!


Use la siguiente javascript:

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

El div más cercano sería el div ''input-group''. Bootstrap-datetimepicker se encargará de agregar la clase ''date'' a la div ''input-group''.


div_id_start_date_container en la respuesta de Daria , pasé una identificación ( div_id_start_date_container ) en el contenedor div de la siguiente manera:

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

Luego envolví esto directamente a través de la identificación en lugar de confiar en la función closest .

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

Nota: las formas crujientes crearán un elemento llamado div_id_start_date para el grupo de formularios, por lo que debe llamar al div externo algo diferente.