Как назначить уникальный идентификатор полям выбора даты в форме django?

Я использую django-bootstrap3 (pip install django-bootstrap3) стороннее приложение для рендеринга форм. Я использую приложение django-bootstrap-datepicker (pip install django-bootstrap-datepicker) для применения календаря виджетов.

В следующей форме у меня есть два поля: check_in и check_out, к которым я хочу применить средство выбора даты вместе.

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

В шаблоне html я отображаю формы таким образом, включая form.media, чтобы принять эффекты js и css bootstrap-datepicker:

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

И когда я пытаюсь отобразить свою форму, эффект выбора даты применяется только к первому полю, отображаемому в форме, это означает, что только поле check_in имеет эффект выбора даты, а поле check_out его не имеет.

  • Проверить в поле

введите здесь описание изображения

  • Проверить поле

введите здесь описание изображения

ОБНОВЛЕНИЕ

Я выполняю проверку в своем браузере и обнаружил, что поля check_in и check_out имеют одинаковый идентификатор _pickers и вызов кода JS для первого найденного _pickers.

  • Зарегистрируйтесь введите здесь описание изображения

  • Проверьте введите здесь описание изображения

Как я могу изменить идентификатор каждого поля с тем, чтобы виджет работал вместе с полями?


person bgarcial    schedule 14.02.2018    source источник
comment
Вы пытались использовать onChange в jQuery для ввода даты?   -  person abybaddi009    schedule 15.02.2018
comment
@ abybaddi009 Я до сих пор не пробовал эту альтернативу. Я прочитал и применил   -  person bgarcial    schedule 15.02.2018
comment
@ abybaddi009 Я думаю, что onChange не является подходящей альтернативой для решения этой проблемы. Я не хочу выбирать какую-либо опцию или видеть какой-либо результат, основанный на предыдущем действии. Как я могу работать с onChange в этом случае?   -  person bgarcial    schedule 15.02.2018


Ответы (1)


Я изменил идентификатор pickers следующим образом:

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

И в моем шаблоне я переопределяю или вызываю функцию datepicker следующим образом:

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

Таким образом, я могу видеть разные идентификаторы, и мой сборщик календаря работает в разных полях.

введите здесь описание изображения

person bgarcial    schedule 17.02.2018