Django表单不显示日期小部件

时间:2018-09-26 18:41:44

标签: javascript django django-templates

我很难让日期小部件显示在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的源代码中正确显示,但未生成任何形式。我仍然只得到一个输入日期的文本框。如何在此处使用小部件显示表单?

1 个答案:

答案 0 :(得分:2)

您正在表单模板中加载bootstarp_js,但是在head标签中调用$(".datepicker").datepicker()函数。因此,它试图在加载bootstrap_js之前调用datepicker函数。这就是为什么它不显示出来(查看您的浏览器控制台错误,应该会对您有所帮助)

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