Django 表单 - django-bootstrap-datepicker-plus 未呈现 datepicker

Posted 2023-02-24

【中文标题】Django 表单 - django-bootstrap-datepicker-plus 未呈现 datepicker

【英文标题】：Django form - django-bootstrap-datepicker-plus is not rendering datepicker

【发布时间】：2018-07-12 14:33:26

【问题描述】：

我在尝试渲染 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 的引导设置中，我必须将 include_jquery 选项改为 True

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

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

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

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

【问题讨论】：

您确定您的表单数据正在提交请求中提交吗？你检查过服务器的帖子数据吗？

你的模型类是什么样的？

@MunimMunna 数据是在POST请求中提交的，根据我上次修改的情况。仅不保存我在问题中引用的日期字段

现在问题很具体，我会尽快更新您

@MunimMunna 谢谢，我的不便可能是我将表单小部件声明为creation_date 和date_of_birth 字段。 ?以防万一，我为此使用了 DJango 小部件..

【参考方案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_jquery 到 true。或者在任何其他脚本之前只在主模板的标题中保留一个 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 ？