This Django widget implements Bootstrap Datepicker v1.6.4 to display date-pickers with Bootstrap 3 or Bootstrap 4. It has been tested in django version 1.8, 1.10, 1.11 and 2.0.4.
pip install django-bootstrap-datepicker-plus
jQuery is needed for the datepicker to render, make sure you have jQuery in your template, or you can enable Bootstraps included jQuery by setting include_jquery option to True in your settings.py.
BOOTSTRAP3 = {
'include_jquery': True,
}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(
options={
"format": "mm/dd/yyyy",
"autoclose": True
}
)
)The options will be passed to the JavaScript datepicker instance, and are documented and demonstrated here:
- Bootstrap Datepicker Documentation (ReadTheDocs.com)
- Interactive Demo Sandbox of All Options
You don't need to set the language option, because it will be set the current language of the thread automatically.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'contrib/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'contrib/font-awesome.min.css' %}">
<script src="{% static 'contrib/bootstrap.js' %}"></script>
</head>
<body>
<form method="post" role="form">
{{ form|bootstrap }}
{% csrf_token %}
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
</body>
</html>Here we assume you're using django-bootstrap-form or django-jinja-bootstrap-form but you can draw out your HTML manually.
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 will be used
'end_date': DatePickerInput(options={'format':'mm/dd/yyyy'}),
}{% load bootstrap3 %} {# imports bootstrap3 #}
{% bootstrap_css %} {# Embeds Bootstrap CSS #}
{% bootstrap_javascript %} {# Embeds Bootstrap JS #}
{% block extrahead %} {# Extra Resources Start #}
{{ form.media }} {# Form required JS and CSS #}
{% endblock %} {# Extra Resources End #}
<form action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Update" />
</form>You can extend the DatePickerInput to customize it further.
from bootstrap_datepicker_plus import DatePickerInput
from django import forms
class CustomizedDatePickerInput(DatePickerInput):
def __init__(self):
super(DatePickerInput, self).__init__(options={
'format': 'mm/dd/yyyy',
'autoclose': True
})
self.div_attrs = {'class': 'input-group date custom-class1', custom-attribute="Hi"}
self.icon_attrs = {'class': 'fa fa-calendar fa-2 custom-class2'}
class EventForm(forms.ModelForm):
class Meta:
model = Event
fields = ['name', 'start_date', 'end_date']
widgets = {
'start_date': CustomizedDatePickerInput(),
'end_date': CustomizedDatePickerInput(),
}You can define custom html template for DatePickerInput to render
from bootstrap_datepicker_plus import DatePickerInput
from django import forms
class CustomizedDatePickerInput(DatePickerInput):
def __init__(self):
super(DatePickerInput, self).__init__(options={
'format': 'mm/dd/yyyy',
'autoclose': True
})
self.html_template = '''
<div%(div_attrs)s>
<input%(input_attrs)s/>
<span class="input-group-addon">
<span%(icon_attrs)s></span>
</span>
</div>'''- Python >= 3.3
- Django >= 1.8
- Bootstrap >= 3
- jquery >= 1.7.1
This project has been originally forked from pbucher/django-bootstrap-datepicker.