Template Customizing

The calendar itself is not customizable via templates, but the input field's wrapper markup can be. Create an HTML template for the widget input:

<!-- File: myapp/templates/myapp/custom-flatpickr-input.html -->
<div class="django-flatpickr field has-addons">
  <!-- The root element must have the "django-flatpickr" class -->

  <div class="control is-expanded">
    {% include 'django/forms/widgets/text.html' %}
    <!-- It generates the HTML <input> element -->
  </div>

  <div class="control">
    <button type="button" class="button" data-toggle>
      <!-- Optional calendar-toggle button, must have the data-toggle attribute -->
      Open
    </button>
  </div>

  <div class="control">
    <button type="button" class="button" data-clear>
      <!-- Optional clear button, must have the data-clear attribute -->
      Clear
    </button>
  </div>
</div>

Note

The django-flatpickr wrapper class and the {% include 'django/forms/widgets/text.html' %} input are required. The data-toggle/data-clear buttons are optional and are flatpickr's native wrap mode convention, which this package always enables.

See the full working example in the demo app.

Apply globally

Add it to the DJANGO_FLATPICKR settings to use it for every widget in your site.

DJANGO_FLATPICKR = {
    "template_name": "myapp/custom-flatpickr-input.html",
}

Subclass the widget and override template_name to use the custom template for just that widget.

from django_flatpickr.widgets import DatePickerInput

class MyDatePickerInput(DatePickerInput):
    template_name = "myapp/custom-flatpickr-input.html"

See forms.py (MyDatePickerInput) for the full working example.

Template Customizing

Apply globally

Apply to a single widget