Skip to main content
Join the official 2019 Python Developers SurveyStart the survey!

Flatpickr based DatePickerInput, TimePickerInput and DateTimePickerInput with date-range-picker functionality for django >= 2.0

Project description

This django widget contains Date-Picker, Time-Picker, DateTime-Picker input widgets with date-range-picker functionality for django version >= 2.0. The widget implements flatpickr to display date-pickers in django model forms and custom forms which can be configured easily for date-range selection. For Bootstrap date-picker see django-bootstrap-datepicker-plus.

Build Status Coverage Status
Python Versions DJango Versions PyPI version
Format Status Licence
Flatpickr Red Theme Flatpickr Default Theme Flatpickr Dark Theme

Getting Started

Prerequisites

  • Python >= 3.4
  • Django >= 2.0

Installing

Install the PyPI package via pip.

pip install django-flatpickr

Add flatpickr to INSTALLED_APPS in your settings.py file.

INSTALLED_APPS = [
    # Add the following
    'flatpickr',
]

Usage

The HTML template must have the following to render the flatpickr widget. A better example is here.

<!-- File: todo.html -->
{{ form.media }}  {# Adds all flatpickr JS/CSS files from CDN #}
{{ form.as_p }}   {# Renders the form #}

You can use it with generic views without a model form. It can also be used with custom forms and model forms as below.

Usage in Custom Form

# File: forms.py
from flatpickr 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 flatpickr 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 flatpickr 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().start_of('event days'),
            'end_date':DatePickerInput().end_of('event days'),
            'start_time':TimePickerInput().start_of('party time'),
            'end_time':TimePickerInput().end_of('party time'),
        }

Customization

To customize the look and features of flatpickr widget copy the settings block to your settings.py file and customize it. Settings applies globally to all flatpickr widgets used in your site.

If you need to customize a single flatpickr widget you can do it as follows:

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

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-flatpickr, version 1.0.1
Filename, size File type Python version Upload date Hashes
Filename, size django_flatpickr-1.0.1-py3-none-any.whl (7.6 kB) File type Wheel Python version py3 Upload date Hashes View hashes
Filename, size django-flatpickr-1.0.1.tar.gz (7.3 kB) File type Source Python version None Upload date Hashes View hashes

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page