Django 和引导程序，为什么我的小部件不起作用？答案

【问题标题】：Django and bootstrap, why my widget does not work?Django 和引导程序，为什么我的小部件不起作用？
【发布时间】：2020-09-15 20:06:31
【问题描述】：

我有以下 html 的 boostrap 代码：

 <div class="input-group date col-2" id="datetimepicker1" data-target-input="nearest">
    {{form.data_contabile|as_crispy_field}}
 <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
 <div class="input-group-text"><i class="far fa-clock"></i></div>
 </div>
 </div>

    <script>
      $(function () {
        $("#datetimepicker1").datetimepicker({
          format: 'DD/MM/YYYY',
        });
      });
    </script>

在我的表单中，下面的代码：

class MaterialeForm(forms.ModelForm):

class Meta:
    model = Materiale
    fields = "__all__"
    exclude = ['iva_amount']
    widgets = {'data_contabile': forms.DateTimeInput(attrs={ 'type':'text', 
                                                             'class':'form-control datetimepicker-input', 
                                                             'data-target': '#datetimepicker1'})}

最后是我的模型：

class Materiale(models.Model):
    data_contabile=models.DateField('Data di acquisto', default="GG/MM/YYYY")

但布局如下：

哪里出错了？

【问题讨论】：

标签： html django bootstrap-4 django-forms django-templates

【解决方案1】：

根据 datetimepicker documentation 在这里您应该在元素的 id 上调用 datetimepicker 函数，而不是元素的数据目标。您可以像这样更改您的模型表单属性：

class Meta:
model = Materiale
fields = "__all__"
exclude = ['iva_amount']
widgets = {'data_contabile': forms.DateTimeInput(attrs={ 'type':'text', 
                                                         'class':'form-control datetimepicker-input', 
                                                         'id': 'datetimepicker1'})}

这应该像这样工作

或

您可以更改您的选择器以在具有 data-target 属性的元素上调用 datetimepicker jquery 函数，如下所示：

$('[data-target=#datetimepicker1]').datetimepicker({
      format: 'DD/MM/YYYY',
    });

无论哪种方式，这都应该有效。

【讨论】：