【问题标题】:Django form - django-bootstrap-datepicker-plus is not rendering datepickerDjango 表单 - django-bootstrap-datepicker-plus 未呈现 datepicker
【发布时间】:2018-07-12 14:33:26
【问题描述】:

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

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

这是我的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 的引导设置中,我必须将 include_jquery 选项改为 True

当我进入表单页面时,date_of_birth 字段未呈现为 日历日期选择器,这是作为输入类型文本呈现的,用户应在其中手动输入特定格式的日期。

在我的 layout.html 中,我将一些附加的 cdn jQuery 资源称为另一件事。

  • 这会导致任何冲突吗?
  • 为什么表单域中的 datepicker 小部件不呈现?

[下面的评论比这次编辑更老]

【问题讨论】:

  • 您确定您的表单数据正在提交请求中提交吗?你检查过服务器的帖子数据吗?
  • 你的模型类是什么样的?
  • @MunimMunna 数据是在POST请求中提交的,根据我上次修改的情况。仅不保存我在问题中引用的日期字段
  • 现在问题很具体,我会尽快更新您
  • @MunimMunna 谢谢,我的不便可能是我将表单小部件声明为creation_datedate_of_birth 字段。 ?以防万一,我为此使用了 DJango 小部件..

标签: javascript django datepicker django-forms bootstrap-datepicker


【解决方案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 的问题。该软件包需要更详细的文档,简单且带有示例。但是一旦你开始配置它就可以很好地工作。

【讨论】:

  • 我没有得到“媒体”的来源,但它在这里工作!你是对的,django-bootstrap-datepicker-plus 文档真的很差,而且那里显示的技巧根本不起作用。
【解决方案2】:

您正在使用django-bootstrap-datepicker-plus,它适用于 DJango 版本 >= 1.8,因此它应该可以完美地适用于您使用 DJango 版本 1.10.7 的项目。如果您按照安装页面上的说明正确执行了所有操作,则可能需要查看以下清单以查看是否一切就绪。

小部件工作清单

  • 需要jQuery,将Bootstrap settings中的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 #}

更新:发现错误

问题正是你所猜测的。 “在我的 layout.html 中,我将一些额外的 cdn jQuery 资源调用到另一个东西。这会导致任何冲突吗?”

我浏览了您的layout.html,发现包含 2 个 jQuery 库,一个在第 22 行,另一个在第 299 行,您说您将 include_jquery 选项设置为 true。所以,是的,它们是冲突的。日期选择器绑定到由引导选项 include_jquery 加载的 jQuery,并且 jQuery 在第 299 行被 jQuery 覆盖。

解决方案:

解决方案是在模板中只保留一个 jQuery。去掉模板中的所有 jQuery,只保留 include_jquerytrue。或者在任何其他脚本之前只在主模板的标题中保留一个 jQuery,并将include_jquery 设置为false

【讨论】:

  • 我听从了他们的建议,我收到了这条消息:File "/home/bgarcial/.virtualenvs/hostayni/lib/python3.6/site-packages/bootstrap_datepicker/widgets.py", line 87, in __init__ self.options['format'] = self.conv_datetime_format_py2js(format) AttributeError: 'DateInput' object has no attribute 'conv_datetime_format_py2js'
  • 我认为我没有导入 jQuery 依赖?可能是 .. ?另一方面,我继续使用bootstrap3,这真的不是excluyent吗?虽然错误与widgets.py中的DateInput父类有关
  • Django 的版本是多少?
  • 我的版本是Django==1.10.7
  • @bgarcial,我添加了资源清单以查看小部件所需的一切是否到位。
【解决方案3】:

如果您的 DATEPICKER 呈现时没有图标并且没有任何点击事件,请检查一下。

1。检查脚本顺序

DATEPICKER NOT RENDERED PROPERLY 问题可能是由脚本加载顺序引起的。 DATEPICKER 需要的 javascript 应该在使用前加载。

例如,如果您的基本模板结构如下所示。

<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 }}?

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-05-29
    • 2020-02-26
    • 1970-01-01
    • 2020-10-02
    • 2021-12-06
    • 1970-01-01
    • 2019-09-22
    • 1970-01-01
    相关资源
    最近更新 更多