django dateTimeWidget not showing up

Question

django newbie here. I have an attempt of a registration page.

It consists of text fields (name, username, password, etc) and a DateField (birthday).

I'm trying to use a forms.DateTimeInput widget for the DateField, but when the page is rendered, nothing happens. Am i doing something wrong? Does this have something im overlooking? It seems pretty simple, but i cant get it to work.

This is my form

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

And my very simple HTML

<form action="" method = "POST">
{{ form.as_p}}
<input type='Submit' value='Register'/>
</form>

Could you clarify? Is the entire form not rendering, or just the DateTime field? — David, Sep 20 '09 at 07:29
The forms and the 'inputs' appear. Its the calendar widget that doesnt. — Tom, Sep 20 '09 at 15:55
When I read DateInput widget I too expected a graphical date picker control (like in django admin). However, I guess it's just a plain text box. Not intuitive IMO. — User, May 25 '10 at 04:10
This question is from 2009. There is another thread with more recent answers on how to display the HTML5 date picker for a Django form field: https://stackoverflow.com/questions/22846048/django-form-as-p-datefield-not-showing-input-type-as-date — Snoeren01, Aug 18 '22 at 12:25

score 11 · Answer 1 · edited May 23 '17 at 12:33

The Django DateInput widget doesn't render anything but a plain text input. It does however validate the user's input against a variety of formats, so it's not useless.

Most people would expect it to behave in the same way as the date picker found in the Django Admin interface, so it's definitely a little confusing.

It is possible to use the AdminDateWidget in your own apps, but I would advise against it. It takes a lot of fiddling around to make it work.

The easiest solution is to use something like the JQuery UI Datepicker. Simply include the following in the <head> of your page:

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

Then at the bottom, put the following line to activate the Datepicker on your input elements:

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

You can make this a little more DRY if you have many date fields by creating a custom widget in your 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",)

Specify each date field should use this widget in your forms:

birthday = forms.DateField(label="Birthday", widget=JQueryUIDatepickerWidget)

And in your template, include the following in the <head>:

{{form.media}}

And activate the Datepicker for all fields by putting the following at the bottom of the page:

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

score 6 · Answer 2 · answered Jun 29 '10 at 09:09

calendar date selector is not part of forms framework.
You can however use jQuery date selector widget

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

On clicking/selecting the birthday textbox, it will show a calendar selector widget
Please give correct location of your jquery.js and jquery-ui.js

score 4 · Answer 3 · answered Sep 20 '09 at 08:25

You shouldn't use a DateTimeInput with a DateField - either use a DateInput, or a DateTimeField.

However, I suspect what you mean by 'nothing happens' is that the links for the calendar date selector don't appear. These aren't part of the standard forms framework, and the documentation doesn't suggest that they do appear with a Date/DateTimeInput. They're part of the admin application, so if you need them in your own app you will need to include the javascript files explicitly.

The easiest way to do this is probably to use AdminDateWidget from django.contrib.admin.widgets, rather than the DateInput. You will also need to include the jsi18n script in your template:

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

I'm really confused about where Django is with datetime widgets. Docs imply an update in 1.1 but I'm not clear what it is. If I have a form like this:
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)
The javascript is loaded, but not calendar icon appears in the form. Would love some clarity around this as I keep having to go back to jQuery. — PhoebeB, Sep 29 '09 at 12:15

score 0 · Answer 4 · edited Feb 07 '22 at 09:50

0

You have to use a SelectDateWidget instead. This one is rendered as a date input and not as a text input. Recently I had the same problem and this is what you need.

edited Feb 07 '22 at 09:50

Nimantha

6,405
6
28
69

answered Jun 03 '20 at 19:09

German

192
1
11

django dateTimeWidget not showing up

4 Answers4

Linked