how do I add css to a specific field in a Django ModelForm

Question

I have a model called Member, which contains a date field. while trying to style the page, I realized I needed a few css classes on the field. I am having issues doing so.

Here is my forms.py AddMember class:

class AddMember(ModelForm):

    class Meta:
        model = Member
        exclude = ['id', 'member_id', 'CurrentRank', 'Lat', 'Lng']
        widgets = {
            'date_joined': forms.TextInput(attrs={'class': 'form-control form-control-inline input-medium date-picker'})
        }
        help_texts = {
            'first_name': 'The First Name of the new recruit',
            'middle_name': 'The Middle Name or Initial of the new recruit',
            'last_name': 'The Last Name of the new recruit',
            'home_phone': 'for US, us xxx-xxx-xxxx for international use country code + city code + number',
            'cell_phone': 'Optional',
            'fax_number': 'Optional',
            'street1': 'House number and Street',
            'street2': 'c/o or organization',
            'City': 'City',
            'State': 'State',
            'Zip': 'Zip Code',
            'Country': 'Select Country from drop down',
            'Eye_Color': 'Eye Color',
            'Hair_Color': 'Hair Color',
            'Height': 'In Inches',
            'date_joined': 'When the member joined first time'
        }

it is joined to the Model Member:

class Member(models.Model):
    id = models.AutoField(primary_key=True)
    member_id = models.CharField(unique=True, max_length=30)
    first_name = models.CharField(max_length=30)
    middle_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)
    email = models.CharField(max_length=50)
    Eye_Color = models.CharField(null=True, max_length=30)
    Hair_Color = models.CharField(null=True, max_length=30)
    Height = models.IntegerField(blank=True, null=True)
    home_phone = PhoneNumberField(blank=True)
    cell_number = PhoneNumberField(blank=True)
    fax_number = PhoneNumberField(blank=True)
    street1 = models.CharField(max_length=255, blank=True)
    street2 = models.CharField(max_length=255, blank=True)
    City = models.CharField(max_length=100, blank=True)
    State = models.CharField(max_length=2, blank=True)
    Zip = models.CharField(max_length=5, blank=True)
    Country = CountryField()
    Lat = models.FloatField(blank=True, null=True)
    Lng = models.FloatField(blank=True, null=True)
    date_joined = models.DateField()
    invite_reason = models.CharField(max_length=64)
    User = models.ForeignKey(User, blank=True, null=True)

from there, I put it in the template:

                        <form role="form" action="/members/add/" method="post" class="form-horizontal">
                            {% csrf_token %}
                            <div class="form-body">
                                {% for field in form %}
                                    <div class="form-group form-md-line-input">
                                        <label class="col-md-2 control-label" for="{{ field.name }}">{{ field.label }}</label>
                                        <div class="col-md-10">
                                            {{field|addcss:"form-control"}}
                                            <div class="form-control-focus">
                                            </div>
                                            {% if field.help_text %}
                                            <span class="help-block">{{ field.help_text|safe }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-offset-2 col-md-10">
                                        <button type="button" class="btn default">Cancel</button>
                                        <button type="Submit" class="btn blue">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </form>

I need the field 'date_joined' to have the added css classes so the front end can actuate the dropdown selection of the date. when I fire off the page, it returns normal like all of the other fields.

What am I missing?

Thanks

UPDATE 1: sometime ago, to add a default css tag to an object, I was to create a template tag:

@register.filter(name='addcss')
def addcss(field, css):
    return field.as_widget(attrs={"class": css})

I am using it in the template.

apparently it's overriding the field. How do I set this default in forms.py and override for the one field?

Thanks.

Answer 1

You may take a look at django-widget-tweaks