django-bootstrap-datepicker-plus 3.0.5

Bootstrap3/Bootstrap4 DatePickerInput, TimePickerInput, DateTimePickerInput, MonthPickerInput, YearPickerInput with date-range-picker functionality for django version 2.1, 2.0, 1.11, 1.10 and 1.8

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.

Demo

• With Bootstrap 3.

• With Bootstrap 4.

Getting Started

Prerequisites

• Python >= 3.3

• Django >= 1.8

• Bootstrap >= 3

• jquery >= 1.7.1

Installing

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})

Usage

Custom Form usage

# 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')
    )

Model Form usage

# 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
        }

Types of DatePickers

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(),
        }

Implement date-range-picker

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'),
        }

Customize the Options

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.

Contributing

• CONTRIBUTING.md.

• CODE_OF_CONDUCT.md.

License

This project is licensed under Apache License 2.0 - see the LICENSE file for details.

Acknowledgments

This project implements Eonasdan/bootstrap-datetimepicker to display date-pickers. The project was initially forked from pbucher/django-bootstrap-datepicker.