Django DateTimeField input Form

Question

I have a DateTime field in my model and I'm looking for a simple way to make it look okay in the form. Something like the SelectDateWidget.

I've been looking at a lot of similar questions, and it seems really tricky to get something like the admin datepicker or jquery to work. (This is my first time using Django, and I have never used jquery before).

So, I'm using the ChoiceField instead from this example, but I can't get it to work either. I get error name 'self' is not defined. Can I not use self here? Or is there some better simple way to do this? I don't need a fancy datepicker, just something that makes the input easy for the user.

class ProjectForm(ModelForm):
    startdate = forms.DateField()
    starthour = forms.ChoiceField(choices=((6,"6am"),(7,"7am"),(8,"8am"),(9,"9am"), ...))
    startminute = forms.ChoiceField(choices=((0,":00"),(15,":15"),(30,":30"),(45,":45")))

    class Meta:
        model = Project

    def clean(self):
        starttime = time(int(self.cleaned_data.get('starthour')), 
                         int(self.cleaned_data.get('startminute')))
        return self.cleaned_data

    try:
        self.instance.start_time = datetime.datetime.combine(
            self.cleaned_data.get("startdate"), starttime)
    except TypeError:
        raise forms.ValidationError("")

Solution 1

forms.py

from django import forms
from django.contrib.admin import widgets                                       

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['mydate'].widget = widgets.AdminDateWidget()
        self.fields['mytime'].widget = widgets.AdminTimeWidget()
        self.fields['mydatetime'].widget = widgets.AdminSplitDateTime()

In template:

<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>

…or, for Django 1.4+:

{% load static %}

<link rel="stylesheet" type="text/css" 
    href="{% static 'admin/css/forms.css' %} "/>
<link rel="stylesheet" type="text/css" 
    href="{% static 'admin/css/base.css' %} "/>
<link rel="stylesheet" type="text/css" 
    href="{% static 'admin/css/global.css' %}"/>
<link rel="stylesheet" type="text/css" 
    href="{% static 'admin/css/widgets.css' %}"/>

<script type="text/javascript" 
    src="/admin/jsi18n/"></script>
<script type="text/javascript" 
    src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript" 
    src="{% static 'admin/js/admin/RelatedObjectLookups.js' %}"></script>
<script type="text/javascript" 
    src="{% static 'admin/js/jquery.js' %}"></script>
<script type="text/javascript" 
    src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" 
    src="{% static 'admin/js/actions.js' %}"></script>
<script type="text/javascript" 
    src="{% static 'admin/js/calendar.js' %}"></script>
<script type="text/javascript" 
    src="{% static 'admin/js/admin/DateTimeShortcuts.js' %}"></script>

Solution 2

If you're stuck with the error

Could not parse the remainder: '/js/jquery.init.js'' from 'admin/js/jquery.init.js''". 

Just add an apstrophe before admin/js/jquery.init.js it will look like:

'admin/js/jquery.init.js' 

Comments

[ana]

Thanks! But I get error 'self' is not defined. And I don't have a forms.py, I have the form in models.py, does it matter?

[ana]

And do I have to have a field for both date and time or can I just have a field form datetime?

[catherine]

if you want to use only datetime, it ok, the others are just examples

[catherine]

please post your codes in your question where you get the error

[catherine]

it doesn't matter, it will works but for django practices what you'd do is a bad practice

[ana]

ok, I created the forms.py and it works, but I'm not really sure how the form in the template should look? Now I just have {{ form.as_p }}

[ana]

I'm stuck at Error: "Could not parse the remainder: '/js/jquery.init.js'' from 'admin/js/jquery.init.js''". Any idea why?

[catherine]

try to remove that script and see what is the result

[ana]

then the result is nothing, it just split the datetime into two different inputs. I must be missing something bur I don't know what