[Solved]-Django dateTimeWidget not showing up

by

11👍

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

6👍

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

👤Rajani Karuturi

4👍

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>
👤Daniel Roseman

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.

👤German

Leave a comment