1

Estoy utilizando django-bootstrap3 (pip install django-bootstrap3) para renderizar formularios y django-bootstrap-datepicker (pip install django-bootstrap-datepicker) para aplicarles a los campos DateField un widget de calendario.

En mi formulario, tengo los campos check_in y check_out a los cuales quiero aplicarles juntos el efecto del date-picker, para lo cual hago esto:

from bootstrap_datepicker.widgets import DatePicker
class DateInput(DatePicker):
    def __init__(self):
        DatePicker.__init__(self,format="%Y-%m-%d")
    def build_attrs(self, attrs, extra_attrs=None, **kwargs):
        attrs = dict(self.attrs, **kwargs)
        if extra_attrs:
            attrs.update(extra_attrs)
        return attrs

class LodgingOfferForm(forms.ModelForm):

    class Meta:
        widgets = {
            'check_in': DateInput(),
            'check_out': DateInput(),
        }
        model = LodgingOffer
        fields = ('other fields', 'check_in', 'check_out', )

En mi template estoy renderizando los campos de esta forma, incluyendo el form.media para aceptar efectos css y js en ellos. A grandes rasgos lo tengo asi:

{% load bootstrap3 %}
{% block body_content %}

{% block extrahead %}   {# Extra Resources Start #}
   {{ form.media }}        {# Form required JS and CSS #}
{% endblock %}

{% bootstrap_field form.check_in %}
{% bootstrap_field form.check_out %}
{% endblock %}

Cuando yo renderizo mi formulario, el efecto date-picker solo aplica para el primer campo renderizado es decir solo para check_in y no para check_out

  • Check in

introducir la descripción de la imagen aquí

  • Check out

introducir la descripción de la imagen aquí

Como puedo hacer para aplicarles el efecto date-picker a ambos campos?

ACTUALIZACIÓN

Realizando un inspect en mi navegador, he detallado que el tiempo de ejecucion se genera un codigo JS el cual asigna el id _pickers para cada campo check_in y check_out, solo que el script llama al primero que encuentra y es por eso que para el campo check_out que es el segundo no funciona:

  • Check in

introducir la descripción de la imagen aquí

  • Check out

introducir la descripción de la imagen aquí

Acorde a esto, se esta usando el mismo id _pickers para los campos. Como puedo asignarle un id unico a cada date-picker?

1 respuesta 1

0

He cambiado el id pickers de esta manera: En la definición del formulario he sobreescrito el campo asignándole un selector id con un nombre diferente.

class LodgingOfferForm(forms.ModelForm):
    class Meta:
        widgets = {
            'check_in': DateInput(),
            'check_out': forms.DateInput(attrs={'id': 'datepicker2'}),

            'country': CountrySelectWidget(),
        }
        model = LodgingOffer
        fields = ('check_in', 'check_out', )

Y en mi template he sobreescrito o llamado a la funcion datepicker de esta forma:

<script type="text/javascript">
    $(function () {
        $('#datepicker2').datepicker({
            inline: true,
            sideBySide: true,
           // format: 'DD.MM.YYYY' 
        });
    });
</script>

De esta forma ya tengo diferentes ids en cada campo de fecha y el efecto de widget de date-picker

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.