jQuery Calendar Date Picker in Django Forms

One of Django missing features that all developers miss is the lack of a calendar component that allows a user to select a date from a visual component instead of writing the date in a text field using a predefined format.

The common solution that seems to use the calendar from the administrator graphical interface.
Unfortunately this is a hack that takes too much work for a possible failure, since a Django update may break it all.

While Django does not provide such component, the best option is to use a solid solution, such as using the independent jQuery Calendar Date Picker.
This can be set up in ten minutes and does not depend on Django version.

The first step is to download the jQuery Datepicker component.

Uncompress it and put it in your media directory, so that it looks something like “media/jquery”, or something else that is fits best with your structure. For the current example “media/jquery” will be used.

In your HTML file, include the following scripts:

<link type="text/css" href="/media/jquery/css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/media/jquery/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/media/jquery/js/jquery-ui-1.8.18.custom.min.js"></script>

Please note that the file names will vary according to the jQuery version and the CSS will vary according with the selected template. Don’t forget to confirm the location and file names.

Next, you must bind your form objects with the jQuery Datepicker with the following script. Also include this on your HTML file

<script>
$(function() {
  $( "#id_form_date_field" ).datepicker();
});
</script>

Where “form_date_field” should be your form date field, keep the “#id_” because Django precedes the ids with “id_”

If you require internationalization, load the correspondent i18n file after the “jquery…min.js” file:

<script type="text/javascript" src="/media/jquery/development-bundle/ui/i18n/jquery.ui.datepicker-{{request.LANGUAGE_CODE}}.js"></script>

This will load the appropriate i18n file.

If you try it and it’s not working, check the files location and the name of the object you’re binding to, these are the two most common problems.