它由文本字段(名称,用户名,密码等)和DateField(生日)组成。
我正在尝试为DateField使用forms.DateTimeInput小部件,但是当呈现页面时,没有任何反应。难道我做错了什么?这有什么东西可以忽略吗?看起来很简单,但我无法让它工作。
这是我的表格
class RegisterForm(forms.Form):
username = forms.CharField(max_length= 50)
password = forms.CharField(label=u'Password',widget = forms.PasswordInput(render_value=False))#password
birthday = forms.DateField(required=False,initial=datetime.date.today,widget = forms.DateTimeInput())#25 Oct 2006
我非常简单的HTML
<form action="" method = "POST">
{{ form.as_p}}
<input type='Submit' value='Register'/>
</form>
答案 0 :(得分:10)
Django DateInput小部件除了纯文本输入外不会呈现任何内容。然而,它确实根据各种格式验证用户的输入,因此它没有用处。
大多数人都希望它的行为方式与Django Admin界面中的日期选择器相同,所以它肯定有点令人困惑。
可以在自己的应用程序中使用AdminDateWidget,但我会建议不要这样做。它需要a lot of fiddling around to make it work。
最简单的解决方案是使用类似JQuery UI Datepicker的内容。只需在您网页的<head>
中添加以下内容:
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" rel="Stylesheet" />
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
然后在底部,输入以下行来激活输入元素上的Datepicker:
<script type="text/javascript">
$(function(){
$("#id_birthday").datepicker();
});
</script>
如果您通过在forms.py
中创建自定义小部件而拥有许多日期字段,则可以使其更加干燥:
class JQueryUIDatepickerWidget(forms.DateInput):
def __init__(self, **kwargs):
super(forms.DateInput, self).__init__(attrs={"size":10, "class": "dateinput"}, **kwargs)
class Media:
css = {"all":("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css",)}
js = ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js",
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js",)
指定每个日期字段应在表单中使用此小部件:
birthday = forms.DateField(label="Birthday", widget=JQueryUIDatepickerWidget)
在您的模板中,在<head>
中包含以下内容:
{{form.media}}
通过将以下内容放在页面底部来激活所有字段的Datepicker:
<script type="text/javascript">
$(function(){
$(".dateinput").datepicker();
});
</script>
答案 1 :(得分:6)
日历日期选择器不是表单框架的一部分。
但是,您可以使用jQuery日期选择器小部件
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-min.js"></script>
<!-- give correct location for jquery.js -->
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui-min.js"></script>
<!-- give correct location for jquery-ui.js -->
<script type="text/javascript">
jQuery(function() {
jQuery("#id_birthday").datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<form method="post">
{{ form.as_p }}
<input type="submit" value="Create Phase" />
</form>
点击/选择生日文本框时,它将显示日历选择器小部件
请给出你的jquery.js和jquery-ui.js
答案 2 :(得分:4)
您不应将DateTimeInput与DateField
一起使用 - 使用DateInput
或DateTimeField
。
但是,我怀疑“没有任何反应”的意思是日历日期选择器的链接不会出现。这些不是标准表单框架的一部分,文档并不表明它们确实出现了Date / DateTimeInput。它们是管理应用程序的一部分,因此如果您在自己的应用程序中需要它们,则需要明确包含javascript文件。
最简单的方法是使用AdminDateWidget
中的django.contrib.admin.widgets
,而不是DateInput。您还需要在模板中包含jsi18n脚本:
<script type="text/javascript" src="/admin/jsi18n/"></script>
答案 3 :(得分:-1)
您必须改用SelectDateWidget。这一个呈现为日期输入而不是文本输入。最近,我遇到了同样的问题,这就是您所需要的。
https://docs.djangoproject.com/en/3.0/ref/forms/widgets/#django.forms.SelectDateWidget