Django 和引导程序，为啥我的小部件不起作用？

Posted 2023-02-24

【中文标题】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")

但布局如下：

哪里出错了？

【参考方案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',
    );

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