Django-bootstrap-datepicker-plus 没有正确呈现日期选择器

Question

我遇到了我的日期时间选择器根本没有加载的问题。

就在我的模板中，当我按图像显示的日历图标时，日期时间字段会加载当前日期和时间。

尽管按照此处的安装步骤：https://pypi.org/project/django-bootstrap-datepicker-plus/ 并检查了 Whosebug 中的其他答案，但我未能找到解决方案。

我认为问题与导入及其优先级有关。

我的模板

{% extends 'base.html' %}
{% load render_table from django_tables2 %}
{% load bootstrap4 %}       
{% bootstrap_css %}         
{% bootstrap_javascript jquery='full' %}  


{% block page-title %}Creation of Process Note{% endblock %}

{% block content %}

<div class="row">
  <div class="col-md-6 col-xl-6 offset-md-3">

  <form class="well" method="post" action="">
      {% csrf_token %}
    {% bootstrap_form form %}

<br>
        {% buttons %}

          <button type="submit" class="btn btn-primary">
               Submit
          </button>
      {% endbuttons %}

  </form>

{{ form.media }}

</div>
</div>

{% endblock %}

在settings.py

BOOTSTRAP4 = {
    'include_jquery': True,
}

在我的 base.html 中，导入的外观是：

脑袋里面

<link href="/static/theme/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="/static/theme/assets/js/jquery.min.js"></script>

...

内部页脚

<script src="/static/theme/assets/js/bootstrap.bundle.min.js"></script>

...

我的模型

class Case_Notes(models.Model):
    date_created = models.DateTimeField("Creation Date", null=True,blank=True, default=datetime.datetime.now)
    date = models.DateTimeField("Appointment Date", null=True,blank=True)
    notes = models.CharField("Notes",max_length=500, blank=True, null=True)

    def __str__(self):
        return self.notes

我的表格

class ProcessNotesForm(ModelForm):
    notes= CharField(required=False,widget=Textarea(attrs={"rows":5, "cols":20}))
    class Meta:
        model = Case_Notes
        fields = ("date","notes",)
        widgets = {
            'date': DateTimePickerInput(), # default date-format %m/%d/%Y will be used
        }

为什么表单字段中的日期选择器小部件未呈现？

Answer 1

根据 documentation，{{ form.media }} 需要紧跟在模板文件中 {% bootstrap_javascript jquery='full' %} 的下方。

{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{{ form.media }}

Answer 2

除 {{ form.media }} 之外，您在 ModelForm 的 Meta 字段中使用元组而不是数组：

class ProcessNotesForm(ModelForm):
    notes= CharField(required=False,widget=Textarea(attrs={"rows":5, "cols":20}))
    class Meta:
        model = Case_Notes
        fields = ["date", "notes" ] # change this ("date","notes",)
        widgets = {
            'date': DateTimePickerInput(), # default date-format %m/%d/%Y will be used
        }

Django-bootstrap-datepicker-plus 没有正确呈现日期选择器

Django-bootstrap-datepicker-plus is not rendering datepicker properly

javascript

django

datepicker

django-forms

bootstrap-datepicker