django dateTime 小部件未显示

标签 django forms

这里是 Django 新手。我尝试了一个注册页面。

它由文本字段(姓名、用户名、密码等)和日期字段(生日)组成。

我尝试对 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>

最佳答案

Django DateInput 小部件除了纯文本输入外不呈现任何内容。不过,它确实会根据各种格式验证用户的输入,因此它并非毫无用处。

大多数人希望它的行为方式与 Django 管理界面中的日期选择器相同,因此这肯定有点令人困惑。

可以在您自己的应用程序中使用 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> 

然后在底部添加以下行以激活输入元素上的日期选择器:

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

并通过将以下内容放在页面底部来激活所有字段的日期选择器:

<script type="text/javascript"> 
  $(function(){
    $(".dateinput").datepicker();
  });
</script>

关于django dateTime 小部件未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1450463/

相关文章:

Django unique_together 关于父属性的子类模型?

django - 如何在通过 api 获得访问 token 时创建新用户和新的 django allauth 社交帐户?

django 管理员内联查询集限制

javascript - jquery动态添加表单字段问题

javascript表单文本框post js和html

sql - 当 ForeignKey null=True 时 Django 慢查询

Django/ celery : celeryd won't retrieve new tasks from queue unless restarted

javascript - 触发单选按钮单击并设置选中的属性问题

javascript - JQuery 验证匹配字段

javascript - Chrome form.submit 未转到正确的 URL