Fixing date input in Django

Posted by – February 18, 2009

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.customer.models import Customer

class CustomerForm(forms.ModelForm):       
   
    birthdate = forms.DateField(('%d/%m/%Y',), label='Birth Date', required=False,  
        widget=forms.DateTimeInput(format='%d/%m/%Y', attrs={
            'class':'input',
            'readonly':'readonly',
            'size':'15'
        })
    )
   
    class Meta:
        model = Customer

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:

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>Customer 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.customer.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>

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.

Share

9 Comments on Fixing date input in Django

  1. yves says:

    If I would have found your blog entry sooner, it would have saved me a whole day of testing and debugging, but at least I found it.
    You saved my day!!!!!:razz:

  2. yves says:

    the smily :razz: doesn’t seems to work

  3. yves says:

    i worked space was missing….

  4. david says:

    Nice little tutorial and I really like the method to define customized widgets in ModelForm classes. Well done!

  5. You’re nice for posting this, thanks.

  6. Michael says:

    Thankyou thankyou thankyou :grin:

  7. P.N. says:

    What’s a “Costumer”? A customer in a costume? :wink:

  8. Thanks, it worked well for me =)

  9. Abdel says:

    Thank you very very much, I had spent 2 hours googling.
    thank you :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>