Post date: May 5, 2009 4:00:05 PM
(c)TupeHo "http://faces.eti.br/2009/02/18/fixing-date-input-in-django/"
There’s no doubt about Django and its agile development nature, but there are some circustances where we need take more care on user input, one of these circustances is date input, after few hours googling about it I finally found a way to fix date input by just using DateTimeInput widget on DateField of Django ModelForm.
Let’s take a look in the code below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from django import forms
from app.costumer.models import Costumer
class CostumerForm(forms.ModelForm):
birthdate = forms.DateField(('%d/%m/%Y',), label='Birth Date', required=False,
widget=forms.DateTimeInput(format='%d/%m/%Y', attrs={
'class':'campo',
'readonly':'readonly',
'size':'15'
})
)
class Meta:
model = Costumer
In the code above we are creating a Django ModelForm that contains only one DateField called birthDate (line 6), this field contains a custom date input format that allow the user to input date in ‘dd/mm/yyyy’ format.
But what about output dates in this format when restoring a date from database? Simple, just attach a DateTimeInput widget as we have above (line 7) and pass the same date format used on DateField.
And now the best part, we will add a JQuery widget to make date input a little more interesting as we can see below:
In the lines 5 to 12 we are importing a css and javascript files that contains everything need to get datepicker working in this page, note a javascript call to initialize the datepicker widget at line 10, we are initializing this widget with a custom date format, the same as defined in Django ModelForm, when the user put focus on birth date field of the page above, a calendar is displayed, when the user select a date in this calendar the selected date goes to form input in ‘dd/mm/yyyy’ format. If the user clicks on “Save” button, the page form is submitted and the date entered by user is correctly validated and stored in database.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Costumer Registration</title>
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}stylesheets/theme/ui.all.css" />
<script src="{{ MEDIA_URL }}javascripts/jquery-1.3.1.js"></script>
<script src="{{ MEDIA_URL }}javascripts/jquery-ui-personalized-1.6rc6.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("#id_birthDate").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
</head>
<body>
<form action="{% url app.costumer.views.save %}" method="post">
<center>
<span id="formTitle">Registration Form</span>
<br/>
{{ form.errors }}
<br/>
{{form.birthDate.label_tag}} {{form.birthDate}}
<br/>
<input type="submit" value="Save" />
</center>
</form>
</body>
</html>