How do you change the default widget for all Django date fields in a ModelForm?

Question

Given a set of typical models:

# Application A
from django.db import models
class TypicalModelA(models.Model):
    the_date = models.DateField()

 # Application B
from django.db import models
class TypicalModelB(models.Model):
    another_date = models.DateField()

...

How might one change the default widget for all DateFields to a custom MyDateWidget?

I'm asking because I want my application to have a jQueryUI datepicker for inputting dates.

I've considered a custom field that extends django.db.models.DateField with my custom widget. Is this the best way to implement this sort of across-the-board change? Such a change will require specifically importing a special MyDateField into every model, which is labour intensive, prone to developer error (i.e. a few models.DateField's will get through), and in my mind seems like unnecessary duplication of effort. On the other hand, I don't like modifying what could be considered the canonical version of models.DateField.

Thoughts and input is appreciated.

Answer 1

This article has helped me numerous times.

The meat of it involves overriding the ModelForm's __init__ method, then calling the super class' __init__ method, then adjusting the fields individually.

class PollForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(PollForm, self).__init__(*args, **kwargs)
        self.fields['question'].widget = forms.Textarea()

    class Meta:
        model = Poll

This method may seem more complicated than Vasil's, but it offers the additional benefit of being able to precisely override any attribute on a field without resetting any other attributes by re-declaring it.

Answer 2

Well, making a custom model field just to change it's default form widget is not really the obvious place to start.

You can make your own form widget and override the field in the form, specifying your own widget like in Soviut's answer.

There's also a shorter way:

class ArticleForm(ModelForm):
     pub_date = DateField(widget=MyDateWidget())

     class Meta:
         model = Article

There is an example of how to write form widgets, it's somewhere in the forms package of Django. It's a datepicker with 3 dropdowns.

What I usually do when I just want to add some JavaScript to a standard HTML input element is leave it the way it is and modify it by referencing it's id later with JavaScript. You can easily catch the naming convention for the ids of the input fields Django generates.

You can also just provide the class for the widget when you override it in the form. Then catch them all with jQuery by the class name.

Answer 3

You can declare an attribute on your ModelForm class, called formfield_callback. This should be a function which takes a Django model Field instance as an argument, and returns a form Field instance to represent it in the form.

Then all you have to do is look to see if the model field passed in is an instance of DateField and, if so, return your custom field/widget. If not, the model field will have a method named formfield that you can call to return its default form field.

So, something like:

def make_custom_datefield(f):
    if isinstance(f, models.DateField):
        # return form field with your custom widget here...
    else:
        return f.formfield()

class SomeForm(forms.ModelForm)
    formfield_callback = make_custom_datefield

    class Meta:
        # normal modelform stuff here...

Answer 4

You do want to define a custom widget, and use the widget's inner Media class to define the JS (and CSS?) files that have to be included in the page for the widget to work. If you do this right, you can make your widget completely self-contained and reusable. See django-markitup for one example of doing this (it has a reusable widget for the MarkItUp! universal markup editor).

Then use formfield_callback (see James Bennett's answer) to easily apply that widget to all DateField's in a form.

Answer 5

I use JQuery. You only have to look for the 'id' of the fields you want to associate with the date picker and bind them with JQuery and the right display format:

models.py

class ObjectForm(ModelForm):
    class Meta:
        model = Object        
        fields = ['FieldName1','FieldName2']

at the top of the page you render with your view:

<head>
    <link type="text/css" href="/media/css/ui-darkness/jquery-ui-1.8.2.custom.css" rel="Stylesheet" /> 
    <script type="text/javascript" src="/media/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/media/js/jquery-ui-1.8.2.custom.min.js"></script>
</head>
<script type="text/javascript">
 $(function() {
        $("#id_FieldName1").datepicker({ dateFormat: 'yy-mm-dd' });
        $("#id_FieldName2").datepicker({ dateFormat: 'yy-mm-dd' });
 });
</script>
...
{{form}}