Bootstrap 3/4 compatible datepicker for Django projects.
Project description
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.
Install
pip install django-bootstrap-datepicker-plus
Add jQuery
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.
settings.py
BOOTSTRAP3 = {
'include_jquery': True,
}Simple Usage
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(
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)
You don’t need to set the language option, because it will be set the current language of the thread automatically.
template.html
<!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.
Usage in Model Form
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 will be used
'end_date': DatePickerInput(options={'format':'mm/dd/yyyy'}),
}event.update.html
{% 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>More Customization
You can extend the DatePickerInput to customize it further.
forms.py
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
forms.py
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>'''Requirements
Python >= 3.3
Django >= 1.8
Bootstrap >= 3
jquery >= 1.7.1
This project has been originally forked from pbucher/django-bootstrap-datepicker.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-bootstrap-datepicker-plus-2.0.0.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | a461af02605199e6ef05d0c6de35cf943443b1f7ecf70bc4f66d2112173bfc81 |
|
| MD5 | 6102624f557c0718239a1956edc9b771 |
|
| BLAKE2b-256 | 3e23d6e4b9164a2e6af0a71c5f3030f4144d79ea641602141998acf4b595171b |
Hashes for django_bootstrap_datepicker_plus-2.0.0-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 659d3e1a56e2bafef6a66f03eb4374038c59fdf730eae61b33ac2b317060084d |
|
| MD5 | 0890d6674eebf6e47790cc29b3cb4634 |
|
| BLAKE2b-256 | 3945928d3f29f22c1cc441e268026ae85091e9a69558ecb5d74e46d4fcbd5ffc |
