CODEWITHSUNDEEP
djangodjango-forms
Yunti
Yunti

Reputation: 7448

Django selectdatewidget how to render manually?

I'm trying to render a selectdatewidget in django out manually so I can customise with bootstrap. However I'm not clear on how I render out the indvidual inputs with the selectdatewidget?

class ProfileForm(forms.Form):

    first_name = forms.CharField(max_length=30)
    last_name = forms.CharField(max_length=30)

    eighteen_years_from_now = (datetime.datetime.now().year - 18)
    date_of_birth = FieldBuilder(User, 'date_of_birth', widget=SelectDateWidget(
        years=range(eighteen_years_from_now, 1919, -1)))

template to render an individual field:

    <div class="form-group">
  <label for="{{ field.id_for_label }}" class="sr-only">
    {{ field.label }}
  </label>
  {% if form.is_bound %}
    {% if field.errors %}
      {% render_field field class="form-control is-invalid" %}
      {% for error in field.errors %}
        <div class="invalid-feedback">
          {{ error }}
        </div>
      {% endfor %}
    {% else %}
      {% render_field field class="form-control is-valid" %}
    {% endif %}
  {% else %}
    {% render_field field class="form-control" placeholder=field.label %}
  {% endif %}

  {% if field.help_text %}
    <small class="form-text text-muted">{{ field.help_text }}</small>
  {% endif %}
</div>

Upvotes: 2

Views: 906

Answers (1)

Yunti
Yunti

Reputation: 7448

The short answer is that you can't get the control needed, without overriding the inbuilt django template.

Thankfully Django 1.11 changed the widget system to use templates rather than python code making this easier to override. From reviewing the templates in django/forms/templates/django/forms/widgets we can see that the select date widget loads the multiwidget template which for each subwidget loads the widget template: {% for widget in widget.subwidgets %}{% include widget.template_name %}{% endfor %}

For select date widget this means the output is the 3 select tags (month, day, year) next to each other. This can't be eg made inline with bootstrap as each <select> needs to be wrapped in a div with the appropriate css class.

Templates can be overriden by following the django docs here: https://docs.djangoproject.com/en/1.11/ref/forms/renderers/#overriding-built-in-widget-templates

Upvotes: 2

Related Questions