Django и bootstrap, почему у меня не работает виджет? - PullRequest
0 голосов
/ 28 мая 2020

У меня есть следующий код ускорения 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")

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

enter image description here

Где ошибка?

1 Ответ

2 голосов
/ 28 мая 2020

A cc к datetimepicker документации здесь вы должны вызвать функцию 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'})}

Это должно работать следующим образом

или

Вы можете изменить свой селектор, чтобы вызвать datetimepicker jquery функция для элемента с атрибутом data-target, например:

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

В любом случае это должно работать.

...