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

我正在使用django-bootstrap3 pip安装django-bootstrap3第三方应用程序来呈现表单。我正在使用django引导日期选择器pip安装django引导日期选择器应用程序来应用小部件日历

在以下表单中，我有两个字段：签入和签出 我希望将日期选择器应用到一起

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效果：

当我尝试渲染我的表单时，日期选择器效果只会应用于表单中渲染的第一个字段，这意味着just check_in字段具有日期选择器效果，check_out字段没有

值机场 签出字段 更新

我在浏览器中执行了一次检查，发现check_-in和check_-out字段具有相同的id选择器，并且对找到的第一个选择器调用了JS代码

登记入住

退房

如何使用order to widget works to together字段来修改每个字段的id？

我以这种方式更改了id选择器：

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

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

在我的模板中，我以这种方式重写或调用datepicker函数：

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

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

通过这种方式，我可以看到不同的ID，我的日历选择器在同一个字段中工作

---

您是否尝试在jQuery中使用onChange作为日期输入？@abybaddi009我仍然没有尝试过这种替代方法。我读过，也读过apply@abybaddi009我认为onChange不是解决这个问题的合适替代方案。我不想选择某个选项，也不想看到基于上一个操作的某些输出。在这种情况下，我如何使用onChange？