【问题标题】:Django-bootstrap-datepicker-plus is not rendering datepicker properlyDjango-bootstrap-datepicker-plus 未正确呈现日期选择器
【发布时间】:2020-05-23 15:48:53
【问题描述】:

我遇到了我的 datetimepicker 根本没有加载的问题。

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

尽管按照此处的安装步骤:https://pypi.org/project/django-bootstrap-datepicker-plus/ 并检查了 stackoverflow 中的其他答案,但我没有设法找到解决方案。

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

我的模板

{% 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
        }

为什么表单字段中的 datepicker 小部件不呈现?

【问题讨论】:

  • 浏览器控制台有错误吗?
  • 您可以尝试更改数据字段的位置:date=DateTimePickerInput() 在 ModelForm 中的 Meta 类之前的注释之后。
  • @MaestroFJP,不,这很奇怪
  • 根据文档,没有任何错误表明这是{{ form.media }}的位置:django-bootstrap-datepicker-plus.readthedocs.io/en/latest/…
  • @ytsejam 这没有帮助

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


【解决方案1】:

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

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

{{ form.media }}

【讨论】:

  • 我更改了 form.media 的顺序,但没有任何改变。此外,在这种情况下,日历图标会消失
  • 不,控制台中又没有出现任何内容
【解决方案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
        }

【讨论】:

  • 这不起作用。我认为无论如何都需要元组,
  • 很抱歉,但它写成“您在 ModelForm 的 Meta 字段中使用元组而不是数组:”。并且您再次声明需要元组?我完全不明白你的担心。
猜你喜欢
  • 2018-07-12
  • 2017-05-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-22
  • 2012-12-20
  • 1970-01-01
相关资源
最近更新 更多