Django 表单 - django-bootstrap-datepicker-plus 不呈现日期选择器
Django form - django-bootstrap-datepicker-plus is not rendering datepicker
我在尝试渲染 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 class 以根据我的需要自定义它。
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 我想在其中呈现上面提到的表单字段。正如您在 user_form.html 文件 here.
中看到的那样，所有此模板都有一些 div 和 html 结构
在我的 settings.py 的 bootstrap 设置中，我必须 include_jquery 选项到 True
当我转到表单页面时，date_of_birth 字段未呈现为
日历日期选择器，这是呈现为输入类型文本，用户应在其中以特定格式手动输入日期。
在我的 layout.html 中，我调用了一些额外的 cdn jQuery 资源给其他东西。
- 这会引起任何冲突吗？
- 为什么表单字段中的日期选择器小部件未呈现？
[下面的评论比这次编辑要早得多]
您使用的 django-bootstrap-datepicker-plus 适用于 >= 1.8 的 DJango 版本，因此它应该可以在您使用 DJango 1.10.7 版本的项目上完美运行。如果您按照安装页面所说的一切都正确进行了操作，您可能需要查看以下清单以查看是否一切就绪。
Checklist for the widget to work
需要 - jQuery，在 Bootstrap settings.
中将 include_jquery 选项设置为 True
- 确保您在 head 部分包含以下标签
你的主模板。
{% load bootstrap3 %} {# imports bootstrap3 #}
{% bootstrap_css %} {# Embeds Bootstrap CSS #}
{% bootstrap_javascript %} {# Embeds Bootstrap JS #}
{% block extrahead %} {# Embeds Extra Resources #}
{% endblock %} {# Ends Extra Resources #}
- 检查以下标记块是否位于表单模板的顶部。
{% block extrahead %} {# Extra Resources Start #}
{{ form.media }} {# Form required JS and CSS #}
{% endblock %} {# Extra Resources End #}
UPDATE: Found the bug
问题和你猜的一样。 "In my layout.html I am calling some additional cdn jQuery resources to another things. Is this causing any conflict?"
我查看了你的 layout.html 并找到了 2 个 jQuery 库，一个在第 22 行，另一个在第 299 行，你说你有 include_jquery 选项设置为true。所以是的，他们是矛盾的。日期选择器绑定到由 bootstrap 选项 include_jquery 加载的 jQuery，并且 jQuery 被第 299 行中的 jQuery 覆盖。
解决方法：
解决方案是在您的模板中只保留一个 jQuery。删除模板中的所有 jQuery，只保留 include_jquery 到 true。或者只在主模板的 header 中保留一个 jQuery 在任何其他脚本之前并将 include_jquery 设置为 false.
尝试在您的 base.html 模板中添加这些 link 标签并从中扩展到 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 问题。该软件包需要更详细的文档，简单且带有示例。但是一旦你开始配置它就可以很好地工作。
如果您的 DATEPICKER 呈现时没有图标并且没有任何点击事件，请检查一下。
1。检查脚本顺序
DATEPICKER NOT RENDERED PROPERLY 问题可能是由脚本加载顺序引起的。
javascript 在使用之前应该加载需要的 DATEPICKER。
例如，如果您的基本模板结构如下所示。
<html>
<head>
CSS FILES HERE
</head>
<body>
{% block content %}
AND DATEPICKER FORM CALLED HERE
{% endblock %}
SCRIPT FILES HERE(INCLUDE 'JQUERY, BOOTSTRAP, ETC'). <--- SHOULD BE PLACED BEFORE USE DATEPICKER
</body>
</html>
2。检查 {{ form.media }}
您是否在模板中的 DATEPICKER 之前插入了 {{ form.media }}？
我在尝试渲染 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 class 以根据我的需要自定义它。
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 我想在其中呈现上面提到的表单字段。正如您在 user_form.html 文件 here.
在我的 settings.py 的 bootstrap 设置中，我必须 include_jquery 选项到 True
当我转到表单页面时，date_of_birth 字段未呈现为 日历日期选择器，这是呈现为输入类型文本，用户应在其中以特定格式手动输入日期。
在我的 layout.html 中，我调用了一些额外的 cdn jQuery 资源给其他东西。
- 这会引起任何冲突吗？
- 为什么表单字段中的日期选择器小部件未呈现？
[下面的评论比这次编辑要早得多]
您使用的 django-bootstrap-datepicker-plus 适用于 >= 1.8 的 DJango 版本，因此它应该可以在您使用 DJango 1.10.7 版本的项目上完美运行。如果您按照安装页面所说的一切都正确进行了操作，您可能需要查看以下清单以查看是否一切就绪。
Checklist for the widget to work
-
需要
- jQuery，在 Bootstrap settings. 中将
- 确保您在 head 部分包含以下标签 你的主模板。
include_jquery 选项设置为 True
{% load bootstrap3 %} {# imports bootstrap3 #}
{% bootstrap_css %} {# Embeds Bootstrap CSS #}
{% bootstrap_javascript %} {# Embeds Bootstrap JS #}
{% block extrahead %} {# Embeds Extra Resources #}
{% endblock %} {# Ends Extra Resources #}
- 检查以下标记块是否位于表单模板的顶部。
{% block extrahead %} {# Extra Resources Start #}
{{ form.media }} {# Form required JS and CSS #}
{% endblock %} {# Extra Resources End #}
UPDATE: Found the bug
问题和你猜的一样。 "In my layout.html I am calling some additional cdn jQuery resources to another things. Is this causing any conflict?"
我查看了你的 layout.html 并找到了 2 个 jQuery 库，一个在第 22 行，另一个在第 299 行，你说你有 include_jquery 选项设置为true。所以是的，他们是矛盾的。日期选择器绑定到由 bootstrap 选项 include_jquery 加载的 jQuery，并且 jQuery 被第 299 行中的 jQuery 覆盖。
解决方法：
解决方案是在您的模板中只保留一个 jQuery。删除模板中的所有 jQuery，只保留 include_jquery 到 true。或者只在主模板的 header 中保留一个 jQuery 在任何其他脚本之前并将 include_jquery 设置为 false.
尝试在您的 base.html 模板中添加这些 link 标签并从中扩展到 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 问题。该软件包需要更详细的文档，简单且带有示例。但是一旦你开始配置它就可以很好地工作。
如果您的 DATEPICKER 呈现时没有图标并且没有任何点击事件，请检查一下。
1。检查脚本顺序
DATEPICKER NOT RENDERED PROPERLY 问题可能是由脚本加载顺序引起的。 javascript 在使用之前应该加载需要的 DATEPICKER。
例如，如果您的基本模板结构如下所示。
<html>
<head>
CSS FILES HERE
</head>
<body>
{% block content %}
AND DATEPICKER FORM CALLED HERE
{% endblock %}
SCRIPT FILES HERE(INCLUDE 'JQUERY, BOOTSTRAP, ETC'). <--- SHOULD BE PLACED BEFORE USE DATEPICKER
</body>
</html>
2。检查 {{ form.media }}
您是否在模板中的 DATEPICKER 之前插入了 {{ form.media }}？