How to use jQuery UI Datepicker as a Django Widget?

jquery python django django-widget
Martin picture Martin · Mar 7, 2012 · Viewed 11.9k times · Source

Some of my Django 1.3 models have DateField properties. When a form is generated, I'd like to use the jQuery UI Datepicker instead of a plain text field. I understand that I could create new widgets but I don't understand how. In addition, I am not sure if anything like this has already been done for Django (I googled it, no chance).

How to create a Django Widget that I can reuse across multiple models (and page) for the jQuery UI Datepicker?

Answer

Dave picture Dave · Mar 7, 2012

JQueryUI has a very good date UI picker. You can get it here: http://jqueryui.com

Say for example you have the following form:

class DateForm(forms.Form):
   myDate = forms.DateField()

From here you want to bind the JQuery date widget to your field from within your template.

I am assuming here you are passing the DateForm to your template and your path(s) to JQuery are correct. 

<head>
    <link rel="stylesheet" href="/themes/base/jquery.ui.all.css">
    <script src="/jquery.js"></script>
    <script src="/ui/jquery.ui.core.js"></script>
    <script src="/ui/jquery.ui.widget.js"></script>
    <script src="/ui/jquery.ui.datepicker.js"></script>
    <script>
    $(function() {
        $( "#id_myDate" ).datepicker();
    });
    </script>
</head>
<body>

<p>Date: <input type="text" id="id_myDate"></p>

</body>

Please note that myDate is preceded by id_. Django does this transparently so make sure you match it as such: id_myDate.

Hope this helps you.

Related questions

Adding a jQuery script to the Django admin interface

I'm gonna slightly simplify the situation. Let's say I've got a model called Lab. from django.db import models class Lab(models.Model): acronym = models.CharField(max_length=20) query = models.TextField() The field query is nearly always the same as …

Read More
Jquery and Django CSRF Token

I have 2 html Pages. A Parent Page and a Child Page. The Child Page Contains a Submit Button that runs code on the Parent Page to submit an Ajax message. I load the child page using $.load() method and then …

Read More
How to use django-autocomplete-light

How do I use django_autcomplete_light to add autocomplete to one field in a form. I have a form which is based off of a model, and I want to add autocomplete to the firstname field. I have done …

Read More