django dateTime小工具没有显示出来

时间:2009-09-20 06:46:46

标签: django forms

django新手在这里。我尝试了注册页面。

它由文本字段(名称,用户名,密码等)和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>

4 个答案:

答案 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一起使用 - 使用DateInputDateTimeField

但是,我怀疑“没有任何反应”的意思是日历日期选择器的链接不会出现。这些不是标准表单框架的一部分,文档并不表明它们确实出现了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