Django - Specifying default attr for Custom widget

Question

I have created this widget

class DateTimeWidget(forms.TextInput):
  attr = {'class': 'datetimepicker'}
  class Media:
    js = ('js/jquery-ui-timepicker-addon.js',)

Then I use it on my form

class SessionForm(forms.ModelForm):
  class Meta:
    model = Session
  def __init__(self, *args, **kwargs):
    super(SessionForm, self).__init__(*args, **kwargs)
    self.fields['start_time'].widget = DateTimeWidget()
    self.fields['end_time'].widget = DateTimeWidget()

No css class is applied to my fields (I'm expecting datetimepicker applied to both start_time & end_time).
I imagine I have put attr at a wrong location. Where am I supposed to specify it ?

score 6 · Answer 1 · answered Mar 28 '12 at 13:02

Firstly, the html attributes are stored in widget.attrs, not attr.

Secondly, you can't declare attrs = {'class': 'datetimepicker'} in your widget definition, because the __init__ method will overwrite self.attrs.

Instead, you can set the attrs in the __init__ method.

Here's a rather naive implementation. You might want to add some extra checks to make sure you don't overwrite any existing items in kwargs['attrs']. Note that we have subclassed DateTimeInput instead of TextInput.

class DateTimeWidget(DateTimeInput):
    def __init__(self, *args, **kwargs):
        kwargs['attrs'] = {'class': 'datepicker'}
        super(DatePickerWidget, self).__init__(*args, **kwargs)

Thank you, I thought that attr were more linked to the widget than the form field. Why subclassing `DateTimeInput` instead of `TextInput` ? — Pierre de LESPINAY, Mar 28 '12 at 13:16
You don't have to subclass `DateTimeInput`, but you might find its date formatting functionality useful. — Alasdair, Mar 28 '12 at 13:51

score 3 · Accepted Answer · answered Mar 28 '12 at 11:26

3

I see multiple problems:

To override the attrs, you need to override the init and update the attrs. Or you could give attrs when initializing the widget. see: https://github.com/django/django/blob/master/django/forms/widgets.py#L163
widgets can also be defined like:

.

class SessionForm(forms.ModelForm):
    class Meta:
        model = Session
        widgets = {'start_time': DateTimeWidget(),
                   'end_time': DateTimeWidget()}

answered Mar 28 '12 at 11:26

Willian

2,385
15
17

+1 using the `Meta.widgets` attribute makes the `SessionForm` a lot cleaner. – Alasdair Mar 28 '12 at 13:03
Thank you, it's exactly what I was searching for. The override technique seems good. And thank you for the widget property. – Pierre de LESPINAY Mar 28 '12 at 13:17

Django - Specifying default attr for Custom widget

2 Answers2

Linked