Форма Django не отображает виджет даты

Question

Мне трудно заставить виджет даты появляться в django.Учитывая, что проект предназначен для нулевого доступа к Интернету, у меня есть вот что:

forms.py:

class CreateNewPatient(forms.ModelForm):
class Meta:
    model = models.PatientInfo
    fields = ['first_name', 'nickname','last_name',
        'date_of_birth', 'school_grade', 'sex', 'school']
    widgets = {
        'date_of_birth' : forms.DateInput(attrs={'class':'datepicker'}),
    }

шаблон с формой:

{% extends 'base_layout.html' %}

{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

{% block content %}

<!--Form Container-->
<div class="container">
  <form  action="{% url 'patientRecords:new_patient' %}" method="post" 
class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">Submit</button>
    {% endbuttons %}
  </form>
</div>

{% endblock %}

Форма создается с помощью плагина начальной загрузки 4.Вот почему существует некоторый странный синтаксис для генерации формы.

javascript:

<script>
  $(function () {
    $(".datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      changeDay: true,
      yearRange: "1990:2030",
    });
  });
</script>

У меня есть javascript, помещенный в тег head шаблона базового макета.Тег класса .datepicker правильно отображается в исходном коде Chrome, но форма не создается.Я до сих пор просто получаю текстовое поле для ввода даты.Как я могу сделать отображение формы, используя виджет здесь?

Answer 1

Вы загружаете bootstarp_js в шаблон формы, но вызываете функцию $(".datepicker").datepicker() в заголовке тега.Итак, он пытается вызвать функцию datepicker перед загрузкой вашего bootstrap_js.Что поэтому он не отображается (глядя на ошибки консоли вашего браузера, это должно вам помочь)

Так что вы должны включить свой файл bootstrap_js перед функцией datepicker в Headтег или вызов функции выбора даты в шаблоне формы после {% bootstrap_javascript jquery='full' %}