Home / Questions / 138626
Accepted
bgarcial
Asked: 2020-02-15 15:59:34 +0800 CST 2020-02-15 15:59:34 +0800 CST

How to assign a unique ID to each date-picker field in a form in Django

  • 772

I am using it django-bootstrap3 (pip install django-bootstrap3)to render forms and django-bootstrap-datepicker (pip install django-bootstrap-datepicker)to apply a calendar widget to the DateField fields.

In my form, I have the fields check_inand check_outto which I want to apply the effect of the date-picker together, for which I do this:

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

In my template I am rendering the fields in this way, including the form.mediaone to accept css and js effects on them. Roughly I have it like this:

{% 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 %}

When I render my form, the date-picker effect only applies to the first rendered field, that is, only to check_inand not tocheck_out

  • check-in

enter image description here

  • check out

enter image description here

How can I apply the date-picker effect to both fields?

UPDATE

Performing an inspect in my browser, I have detailed that the execution time generates a JS code which assigns the id _pickersfor each check_in and check_out field, only that the script calls the first one it finds and that is why for the check_out field that is the second does not work:

  • check-in

enter image description here

  • check out

enter image description here

Accordingly, the same id is being used _pickersfor the fields. How can I assign a unique id to each date-picker?

django-forms

1 Answers

  1. Best Answer

    I have changed the id pickersin this way: In the form definition I have overridden the field by assigning it an id selector with a different name.

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

    And in my template I have overwritten or called the datepicker function like this:

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

    This way I already have different ids in each date field and the date-picker widget effect

    • 0