GitLocker: The Coding Marketplace

Description:

djangoflatpickr 2.0.3

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.

Demo

Custom Form.
Model Form.
Generic View (without Model Form).
With django-crispy-forms.
With django-filter.
With dynamic formsets.

Getting Started

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
The HTML template must have the following to render the flatpickr widget.
A better example is here.

{{ form.media }} {# Adds all flatpickr JS/CSS files from CDN #}
{{ form.as_p }} {# Renders the form #}

<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
</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 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"),
}

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.
You can set date and event hook options using JavaScript.
window.djangoFlatpickrOptions = {
onChange: function (selectedDates) { console.log(selectedDates) }
}

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.

License

MIT LICENSE.
CONTRIBUTING.
CODE_OF_CONDUCT.