javascript - Django 表单 - django-bootstrap-datepicker-plus 不呈现日期选择器

Question

我在尝试渲染时遇到一些不便 django-bootstrap-datepicker-plus小部件根据 this answer .一切正常，但 Datepicker 没有出现。

我的 Django 版本是 1.10.7，我使用的第三方应用是:

• Django Bootstrap 3 (pip install django-bootstrap3)
• Django Bootstrap Datepicker Plus (pip install django-bootstrap-datepicker-plus)

这是我的 forms.py，我覆盖了 DateInput 类以根据我的需要对其进行自定义。

from django import forms
from bootstrap_datepicker.widgets import DatePicker

class DateInput(DatePicker):
    def __init__(self):
        DatePicker.__init__(self,format="%Y-%m-%d")

class UserUpdateForm(forms.ModelForm):
    class Meta:
        widgets = {     
            'date_of_birth': DateInput(),  # datepicker
            'creation_date': DateInput(), # datepicker
        }
        fields = ("other fields", "date_of_birth", "creation_date", "other fields",)
        model = get_user_model()

然后在我的模板表单中，我有一些名为 layout.html 的基本主模板，我的模板 user_form.html 我想在其中呈现上面提到的表单字段.所有这些模板都有一些 div 和 html 结构，您可以在 user_form.html 文件中看到 here .

在我的 settings.py 的 Bootstrap 设置中，我必须将 include_jquery 选项设置为 True

当我转到表单页面时，date_of_birth 字段未呈现为日历日期选择器，它呈现为输入类型文本，用户应在其中以特定格式手动输入日期。

在我的 layout.html 中，我将一些额外的 cdn jQuery 资源调用到其他东西。

• 这会引起任何冲突吗？
• 为什么表单字段中的日期选择器小部件未呈现？

[下面的评论比这次编辑要早得多]

Answer 1

尝试在您的 base.html 模板中添加这些链接标签并从中扩展到 html 模板表单:

<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>

并添加 {{ form.media }} 到您的模板表单中，例如:

      <form class="mt-3" action="" method="post">{% csrf_token %}
          {{ form.as_p }}
          {{ form.media }}
          <div class="text-center">
            <input class="btn btn-primary btn-block" type="submit" value="Update" />
          </div>
      </form>

这解决了我使用 django-bootstrap-datepicker-plus 的问题。该软件包需要更详细的文档，简单且带有示例。但是一旦您开始配置它，它就会工作得很好。