如何为 django 表单上的日期选择器字段分配唯一 ID？答案

【问题标题】：How to assign a unique ID to date-picker fields on django form?如何为 django 表单上的日期选择器字段分配唯一 ID？
【发布时间】：2018-02-14 23:47:15
【问题描述】：

我正在使用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接受bootstrap-datepicker的js和css效果：

{% 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 字段具有相同的 id _pickers 以及对找到的第一个 _pickers 的 JS 代码调用。

签到
签出

如何修改每个字段的 id 与小部件的顺序一起工作到一起字段？

【问题讨论】：

您是否尝试在 jQuery 中使用 onChange 进行日期输入？
@abybaddi009 我仍然没有尝试过那个替代方案。我已阅读并申请
@abybaddi009 我认为 onChange 不是解决此问题的适当替代方案。我不想选择某些选项或查看基于先前操作的某些输出。在这种情况下，我该如何使用 onChange？

标签： django datepicker bootstrap-datepicker

【解决方案1】：

我已经通过这种方式更改了 id 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>

通过这种方式，我可以看到不同的 id，并且我的日历选择器可以一起工作

【讨论】：