Boostrap datetimepicker неправильная визуализация

Question

У меня есть следующий код ускорения html:

 <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")

А вот раскладка такая:

Где ошибка?