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 %}

表单是使用 bootstrap 4 插件生成的。这不是为什么有一些奇怪的语法来生成表单的原因。

javascript：

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

我将 javascript 放置在基本布局模板的 head 标记中。 .datepicker 类标签在 chrome 上的源代码中正确显示，但没有生成任何表单。我仍然只是得到一个用于输入日期的文本框。如何在此处使用小部件显示表单？

Answer 1

您正在表单模板中加载 bootstarp_js，但在 head 标记中调用 $(".datepicker").datepicker() 函数。所以，它试图在加载你的 bootstrap_js 之前调用 datepicker 函数。这就是它没有显示的原因（查看你的浏览器控制台错误，应该对你有帮助）

因此，您应该在 Head 标记中的 datepicker 函数之前包含 bootstrap_js 文件，或者在 {% bootstrap_javascript jquery='full' %} 之后在表单模板中调用 datepicker 函数