This package includes a Django widget for displaying date pickers with Bootstrap 4. It uses Bootstrap datepicker widget version 1.6.4 .
pip install django-bootstrap-datepicker
Make sure to add bootstrap_datepicker to your INSTALLED_APPS. Then run manage.py collectstatic to include the bootstrap-datepicker js and css files.
General cleanup and testing
from bootstrap_datepicker.widgets import DatePicker
from django import forms
class ToDoForm(forms.Form):
todo = forms.CharField(
widget=forms.TextInput(attrs={"class": "form-control"}))
date = forms.DateField(
widget=DatePicker(
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.
- Python >= 3.4
- Django >= 2.0
- Bootstrap >= 4.0
- jquery >= 1.7.1
- font-awesome >= 4.5.X