django dateTimeWidget 没有出现答案

【问题标题】：django dateTimeWidget not showing updjango dateTimeWidget 没有出现
【发布时间】：2010-11-29 20:16:09
【问题描述】：

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>

【问题讨论】：

你能澄清一下吗？是不是整个表单都没有呈现，还是只是 DateTime 字段？
表格和“输入”出现。它的日历小部件没有。
当我阅读 DateInput 小部件时，我也期待图形日期选择器控件（如在 django admin 中）。但是，我想这只是一个纯文本框。不直观的 IMO。

标签： django forms

【解决方案1】：

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>

然后在底部，输入以下行以激活输入元素上的 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}}

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

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

【讨论】：

【解决方案2】：

日历日期选择器不是表单框架的一部分。
但是，您可以使用 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 的正确位置

【讨论】：

【解决方案3】：

您不应将 DateTimeInput 与 DateField 一起使用 - 使用 DateInput 或 DateTimeField。

但是，我怀疑您所说的“什么都没有发生”是指日历日期选择器的链接没有出现。这些不是标准表单框架的一部分，文档也没有建议它们与 Date/DateTimeInput 一起出现。它们是管理应用程序的一部分，因此如果您在自己的应用程序中需要它们，则需要明确包含 javascript 文件。

最简单的方法可能是使用来自django.contrib.admin.widgets 的AdminDateWidget，而不是使用DateInput。您还需要在模板中包含 jsi18n 脚本：

<script type="text/javascript" src="/admin/jsi18n/"></script>

【讨论】：

我真的很困惑 Django 在哪里使用日期时间小部件。文档暗示 1.1 中的更新，但我不清楚它是什么。如果我有这样的表单：
```
 class EventForm(forms.ModelForm): summary = forms.CharField(label="Event Name", widget=forms.TextInput(attrs={'size':'40'}) ) dtstart = forms.DateTimeField(widget=AdminDateWidget()) dtend = forms.DateTimeField(widget=AdminDateWidget) 
```
javascript已加载，但表单中未出现日历图标。由于我不得不回到 jQuery，因此希望对此有所了解。

【解决方案4】：

您必须改用 SelectDateWidget。这个被呈现为日期输入而不是文本输入。最近我遇到了同样的问题，这就是你需要的。

https://docs.djangoproject.com/en/3.0/ref/forms/widgets/#django.forms.SelectDateWidget

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
链接指向答案的特定部分。