django-flatpickr 2.0.3

Prerequisites

• Python >= 3.8

• Django >= 2.0

Installing

Install the PyPI package via pip.

pip install django-flatpickr

Add django_flatpickr to INSTALLED_APPS in your settings.py file.

INSTALLED_APPS = [
    # Add the following
    "django_flatpickr",
]

Usage in Custom Form

# File: forms.py
from django_flatpickr.widgets import DatePickerInput, TimePickerInput, DateTimePickerInput
from .models import Event
from django import forms

class ToDoForm(forms.Form):
    todo = forms.CharField(widget=forms.TextInput())
    date = forms.DateField(widget=DatePickerInput())
    time = forms.TimeField(widget=TimePickerInput())
    datetime = forms.DateTimeField(widget=DateTimePickerInput())


# File: views.py
class CustomFormView(generic.FormView):
    template_name = "myapp/custom-form.html"
    form_class = ToDoForm

See models.py, forms.py, views.py, custom-form.html for more details.

Usage in Model Form

# File: forms.py
from django_flatpickr.widgets import DatePickerInput, TimePickerInput, DateTimePickerInput
from .models import Event
from django import forms

class EventForm(forms.ModelForm):
    class Meta:
        model = Event
        fields = ["name", "start_date", "start_time", "start_datetime"]
        widgets = {
            "start_date": DatePickerInput(),
            "start_time": TimePickerInput(),
            "start_datetime": DateTimePickerInput(),
        }


# File: views.py
class UpdateView(generic.edit.UpdateView):
    model = Event
    form_class = EventForm

See models.py, forms.py, views.py, event_form.html for more details.

Implement date-range-picker

DatePickers can be linked together to select a date-range, time-range or date-time-range without writing a single line of JavaScript.

# File: forms.py
from django_flatpickr.widgets import DatePickerInput, TimePickerInput
from django import forms

class EventForm(forms.ModelForm):
    class Meta:
        model = Event
        fields = ["name", "start_date", "end_date", "start_time", "end_time"]
        widgets = {
            "start_date": DatePickerInput(),
            "end_date": DatePickerInput(range_from="start_date"),
            "start_time": TimePickerInput(),
            "end_time": TimePickerInput(range_from="start_time"),
        }

Customize single input

from django_flatpickr.schemas import FlatpickrOptions

class ToDoForm(forms.Form):
    todo = forms.CharField(widget=forms.TextInput())
    start_date = forms.DateField(widget=DatePickerInput(
        attrs = {"class": "my-custom-class"}, # input element attributes
        options=FlatpickrOptions(altFormat="m/d/Y"),
    ))

Similarly set date and event hook options using JavaScript.

window.djangoFlatpickrOptions_start_date = {
    onChange: function (selectedDates) { console.log(selectedDates) }
}

Localization

Use locale option, see available localization options.