Easiest way to change widget for specific fields is define your own ModelForm class with Meta class and widgets. Following this logic, you can override almost any widget in your form.
For example if you want to add some additional CSS class to input you can do following:
from django.forms import ModelForm, TextInput
from django.contrib.admin import ModelAdmin
from .models import Country
class CountryForm(ModelForm):
class Meta:
widgets = {
'name': TextInput(attrs={'class': 'input-mini'})
}
class CountryAdmin(ModelAdmin):
form = CountryForm
...
admin.site.register(Country, CountryAdmin)
Note
If you define some custom fields for your form, you must specify model = YourModel parameter for class Meta.
HTML5 number input type="number":
from django.forms import ModelForm
from suit.widgets import NumberInput
class OrderForm(ModelForm):
class Meta:
widgets = {
'count': NumberInput,
# Optionally you specify attrs too
'count': NumberInput(attrs={'class': 'input-mini'})
}
Note
The same result you can achieve with HTML5Input(input_type='number') widget, this is just a shortcut.
Specify input_type and use any of HTML5 input types. You can see some HTML5 input examples in Django Suit Demo app in KitchenSink forms:
from django.forms import ModelForm
from suit.widgets import HTML5Input
class ProductForm(ModelForm):
class Meta:
widgets = {
'color': HTML5Input(input_type='color'),
}
Note
Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields. Also not all types are supported by Twitter Bootstrap.
Supports Twitter Bootstrap prepended/appended form inputs. EnclosedInput widget accepts two arguments prepend= and append=. Values can be text, icon-class or html (starts with html tag). You can also use both prepend= and append= together:
from django.forms import ModelForm
from suit.widgets import EnclosedInput
class ProductForm(ModelForm):
class Meta:
widgets = {
# Appended by text
'discount': EnclosedInput(append='%'),
'size': EnclosedInput(append='m<sup>2</sup>'),
# By icons
'email': EnclosedInput(append='icon-envelope'),
'user': EnclosedInput(prepend='icon-user'),
# You can also use prepended and appended together
'price': EnclosedInput(prepend='$', append='.00'),
# Use HTML for append/prepend (See Twitter Bootstrap docs of supported tags)
'url': EnclosedInput(prepend='icon-home', append='<input type="button" class="btn" value="Open link">'),
}
Preview:
SuitDateWidget, SuitTimeWidget and SuitSplitDateTimeWidget extends original admin widgets by adding some additional output styling only. Widgets still uses same original JavaScript for calendar and time. You can see example in Demo app: User changeform:
from django.forms import ModelForm
from suit.widgets import SuitDateWidget, SuitTimeWidget, SuitSplitDateTimeWidget
class UserChangeForm(UserChangeForm):
class Meta:
model = User
widgets = {
'last_login': SuitSplitDateTimeWidget,
'date_joined': SuitSplitDateTimeWidget,
}
Preview: