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.