Javascript Django表单不显示日期小部件

我很难在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 %}

{%extends'base_layout.html%}
{load bootstrap4%}
{#加载CSS和JavaScript}
{%bootstrap_css%}
{%bootstrap\u javascript jquery='full%}
{#将django.contrib.messages显示为引导警报#}
{%bootstrap_messages%}
{%block content%}
{%csrf_令牌%}
{%bootstrap_form%}
{%buttons%}
提交
{%endbuttons%}
{%endblock%}

表单是使用Bootstrap4插件生成的。这就是为什么会有一些奇怪的语法来生成表单

javascript:

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

$（函数（）{
$（“.datepicker”）.datepicker({
变化月：对，
变化年：是的，
是的，
年份范围：“1990年至2030年”，
});
});

---

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

您正在表单模板中加载bootstarp_js，但在head标记中调用

$（“.datepicker”）.datepicker（）

函数。因此，它试图在加载引导程序之前调用datepicker函数，这就是它没有出现的原因（查看浏览器控制台错误，应该会对您有所帮助）

---

因此，您应该在Head标记中包含datepicker函数之前的bootstrap_js文件，或者在Head标记中调用

{%bootstrap_javascript jquery='full'%}

之后在表单模板中调用datepicker函数，但要在表单模板中加载bootstarp_js，在Head标记中调用

$（“.datepicker”）.datepicker（）

函数。因此，它试图在加载引导程序之前调用datepicker函数，这就是它没有出现的原因（查看浏览器控制台错误，应该会对您有所帮助）

---

因此，您应该在Head标记中的datepicker函数之前包含bootstrap_js文件，或者在

{%bootstrap_javascript jquery='full%}之后的表单模板中调用datepicker函数

我尝试将javascript放在表单模板中的endblock标记之前，但它仍然不起作用。您是否在Chrome developer console中看到任何错误？我收到了2条警告。一个是“runtime.onMessageExternal不受支持”，另一个是“runtime.OnConnectionExternal不受支持”。这两个错误都出现在“content.bundle.js:5”中。看起来您正在使用用于datepicker的jQuery UI库，是否包括jQuery-UI.js文件？我不是。我会尝试包括这个。谢谢我尝试将javascript放在表单模板中的endblock标记之前，但它仍然不起作用。您在Chrome开发者控制台中看到任何错误吗？我收到了2条警告。一个是“runtime.onMessageExternal不受支持”，另一个是“runtime.OnConnectionExternal不受支持”。这两个错误都出现在“content.bundle.js:5”中。看起来您正在使用用于datepicker的jQuery UI库，是否包括jQuery-UI.js文件？我不是。我会尝试包括这个。谢谢