我正在使用 django 3.0,我试图在我的 ModelForm 中显示一个日期选择器小部件,但我不知道如何(我能得到的只是文本字段)。我尝试寻找一些解决方案,但找不到任何解决方案。这就是我的模型和 ModelForm 的样子:
class Membership(models.Model):
start_date = models.DateField(default=datetime.today, null=True)
owner = models.ForeignKey(Client, on_delete=models.CASCADE, null=True)
type = models.ForeignKey(MembershipType, on_delete=models.CASCADE, null=True)
class MembershipForm(ModelForm):
class Meta:
model = Membership
fields = ['owner', 'start_date', 'type']
widgets = {
'start_date': forms.DateInput
}
这是我的 html:
<form class="container" action="" method="POST">
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
虽然@willem-van-onsem 的回答很棒,有一些不需要额外依赖项的替代方案。
一些选项,按照增加努力的顺序:
-
Use a 选择日期小工具而不是默认的日期输入 (no需要 JavaScript):
class MyForm(forms.Form):
date = forms.DateField(widget=forms.SelectDateWidget())
-
通过实现使用 HTML 的自定义小部件,使用浏览器的内置日期选择器元素 (no需要 JavaScript):
class MyDateInput(forms.widgets.DateInput):
input_type = 'date'
class MyForm(forms.Form):
date = forms.DateField(widget=MyDateInput())
或者,或者:
class MyForm(forms.Form):
date = forms.DateField(widget=forms.DateInput(attrs=dict(type='date')))
-
使用日期选择器django.contrib.admin
,如上所述here详细。简而言之,您需要一些东西:
from django.contrib.admin.widgets import AdminDateWidget
...
class MyForm(forms.Form):
date = forms.DateField(widget=AdminDateWidget())
然后,为了使其工作,请将以下依赖项添加到您的模板中<head>
:
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}" />
<script src="{% static 'admin/js/core.js' %}"></script>
<script src="{% url 'admin:jsi18n' %}"></script> {# see note below #}
{{ form.media }} {# this adds 'calendar.js' and 'DateTimeShortcuts.js' #}
现在有一个问题:admin:jsi18n
url 仅适用于具有管理员访问权限的用户,因此您可能需要替换它并在您的urls.py
, e.g.:
from django.views import i18n
...
urlpatterns = [
...,
path('jsi18n/', i18n.JavaScriptCatalog.as_view(), name='jsi18n'),
]
最后,这是小部件的样子(在 Firefox 上):
我个人最喜欢第二种选择。它还允许我们指定初始值、最小值和最大值(在 django 中你可以这样做,例如使用attrs
争论)。下面是一个显示正在运行的 HTML 元素的快速片段:
<input type="date" value="2021-09-09" min="2021-09-09">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)