Package: django-flatpickr
This django widget contains Date-Picker, Time-Picker, DateTime-Picker input
widgets with date-range-picker functionality for django version >= 2.0.
The widget implementsflatpickrto display date-pickers in django model forms and custom forms which can be
configured easily for date-range selection. For Bootstrap date-picker seedjango-bootstrap-datepicker-plus.DemoCustom Form.Model Form.Generic View (without Model Form).With django-crispy-forms.With django-filter.With dynamic formsets.Getting StartedPrerequisitesPython >= 3.8Django >= 2.0InstallingInstall the PyPI package via pip.pip install django-flatpickrAdddjango_flatpickrtoINSTALLED_APPSin yoursettings.pyfile.INSTALLED_APPS=[# Add the following"django_flatpickr",]UsageThe HTML template must have the following to render the flatpickr widget.
A better example ishere.<!-- File: myapp/custom-form.html -->{{ form.media }}  {# Adds all flatpickr JS/CSS files from CDN #}
{{ form.as_p }}   {# Renders the form #}<formmethod="post">{% csrf_token %}
  {% bootstrap_form form %}</form>You can use itwith 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.pyfromdjango_flatpickr.widgetsimportDatePickerInput,TimePickerInput,DateTimePickerInputfrom.modelsimportEventfromdjangoimportformsclassToDoForm(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.pyclassCustomFormView(generic.FormView):template_name="myapp/custom-form.html"form_class=ToDoFormSeemodels.py,forms.py,views.py,custom-form.htmlfor more details.Usage in Model Form# File: forms.pyfromdjango_flatpickr.widgetsimportDatePickerInput,TimePickerInput,DateTimePickerInputfrom.modelsimportEventfromdjangoimportformsclassEventForm(forms.ModelForm):classMeta:model=Eventfields=["name","start_date","start_time","start_datetime"]widgets={"start_date":DatePickerInput(),"start_time":TimePickerInput(),"start_datetime":DateTimePickerInput(),}# File: views.pyclassUpdateView(generic.edit.UpdateView):model=Eventform_class=EventFormSeemodels.py,forms.py,views.py,event_form.htmlfor more details.Implement date-range-pickerDatePickers can be linked together to select a date-range, time-range or
date-time-rangewithout writing a single line of JavaScript.# File: forms.pyfromdjango_flatpickr.widgetsimportDatePickerInput,TimePickerInputfromdjangoimportformsclassEventForm(forms.ModelForm):classMeta:model=Eventfields=["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"),}CustomizationTo customize the look and features of flatpickr widget copy thesettings blockto 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 inputfromdjango_flatpickr.schemasimportFlatpickrOptionsclassToDoForm(forms.Form):todo=forms.CharField(widget=forms.TextInput())start_date=forms.DateField(widget=DatePickerInput(attrs={"class":"my-custom-class"},# input element attributesoptions=FlatpickrOptions(altFormat="m/d/Y"),))Similarly set date and event hook options using JavaScript.window.djangoFlatpickrOptions_start_date={onChange:function(selectedDates){console.log(selectedDates)}}LocalizationUse locale option, seeavailable localization options.LicenseMIT LICENSE.CONTRIBUTING.CODE_OF_CONDUCT.