This django widget contains Bootstrap 3 and Bootstrap 4 Date-Picker, Time-Picker, DateTime-Picker, Month-Picker and Year-Picker input with date-range-picker functionality for django version 2.1, 2.0, 1.11, 1.10 and 1.8. The widget implements bootstrap-datetimepicker v4 to show bootstrap-datepicker in django model forms and custom forms which can be configured easily for date-range selection.
- Python >= 3.3
- Django >= 1.8
- Bootstrap >= 3
- jquery >= 1.7.1
Install the widget via pip
pip install django-bootstrap-datepicker-plus
Add bootstrap_datepicker_plus to the list of INSTALLED_APPS in your settings.py file.
INSTALLED_APPS = [
# Add the following
'bootstrap_datepicker_plus',
]jQuery is needed for datepicker to render, make sure you have jQuery in your template,
or you can use jQuery included with Bootstrap by setting include_jquery option to True
in your settings.py file.
If you don't have BOOTSTRAP3/BOOTSTRAP4 settings block you have to create one.
# Use BOOTSTRAP3 if you are using Bootstrap 3
BOOTSTRAP4 = {
'include_jquery': True,
}Make sure you have bootstrap tags in your template along with forms.media tag,
it adds all JS and CSS resources needed to render the date-picker.
{% load bootstrap4 %} {# import bootstrap4/bootstrap3 #}
{% bootstrap_css %} {# Embed Bootstrap CSS #}
{% bootstrap_javascript jquery='full' %} {# Embed Bootstrap JS+jQuery #}
{{ form.media }} {# Adds date-picker required JS and CSS #}The form.media tag is only for Generic Views. If you are generating the view yourself
and passing the form to render function, you have to use <your-form-variable>.media.
For Example, in case of the following example you have to use {{ my_form.media }}
instead of {{ form.media }}.
# File: views.py
from django.shortcuts import render
from .forms import UserForm
def create_user(request):
user_form = UserForm()
return render(request, 'my_template.html', {'my_form': user_form})# File: forms.py
from bootstrap_datepicker_plus import DatePickerInput
from django import forms
class ToDoForm(forms.Form):
todo = forms.CharField(
widget=forms.TextInput(attrs={"class": "form-control"})
)
date = forms.DateField(
widget=DatePickerInput(format='%m/%d/%Y')
)# File: forms.py
from bootstrap_datepicker_plus import DatePickerInput
from django import forms
class EventForm(forms.ModelForm):
class Meta:
model = Event
fields = ['name', 'start_date', 'end_date']
widgets = {
'start_date': DatePickerInput(), # default date-format %m/%d/%Y will be used
'end_date': DatePickerInput(format='%Y-%m-%d'), # specify date-frmat
}The widget contains all types of date-picker you may ever need.
# File: forms.py
from bootstrap_datepicker_plus import DatePickerInput, TimePickerInput, DateTimePickerInput, MonthPickerInput, YearPickerInput
from django import forms
class EventForm(forms.ModelForm):
class Meta:
model = Event
fields = ['start_date', 'start_time', 'start_datetime', 'start_month', 'start_year']
widgets = {
'start_date': DatePickerInput(),
'start_time': TimePickerInput(),
'start_datetime': DateTimePickerInput(),
'start_month': MonthPickerInput(),
'start_year': YearPickerInput(),
}DatePickers can be linked to select a date-range or time-range.
# File: forms.py
from bootstrap_datepicker_plus 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'),
}The DatePicker can be customised by passing options to it.
The options will be passed to the JavaScript datepicker instance, and are documented and demonstrated in
Bootstrap Datepicker Options Reference.
# File: forms.py
from bootstrap_datepicker_plus import DatePickerInput
from django import forms
class EventForm(forms.ModelForm):
class Meta:
model = Event
fields = ['name', 'start_date', 'end_date']
widgets = {
'start_date': DatePickerInput(format='%m/%d%Y'), # python date-time format
'end_date': DatePickerInput(
options={
"format": "MM/DD/YYYY", # moment date-time format
"showClose": True,
"showClear": True,
"showTodayButton": True,
}
),
}Note: You can specify the date-time format by passing a python date-time format as format parameter (see start_date in the example), or by passing a moment date-time format as an option (see end_date in the example). If both are specified then the moment format in options will take precedence.
This project is licensed under Apache License 2.0 - see the LICENSE file for details.
This project implements Eonasdan/bootstrap-datetimepicker to display date-pickers. The project was initially forked from pbucher/django-bootstrap-datepicker.