Customization

Customize All Inputs

To customize the look and features copy the settings block to your settings.py file and customize it following instruction comments. Settings applies globally to all widgets used in your site.

# The link above contains all settings
BOOTSTRAP_DATEPICKER_PLUS = {
    "options": {
        "locale": "bn",
    },
    "variant_options": {
        "date": {
            "format": "MM/DD/YYYY",
        },
    }
}

JavaScript events and some options can only be set using JavaScript. Starting from v5.0, you can set events and options globally for all widgets like below in your html template inside a <script> tag.

window.dbdpOptions = {
    widgetParent: jQuery("#myWidgetParent"),
}
window.dbdpEvents = {
    "dp.change": e => console.log("Date selected:", e.date, e.oldDate),
    "dp.show": e => console.log("Calendar opened"),
    "dp.hide": e => console.log("Calendar closed", e.date),
    "dp.error": e => console.log("Invalid date input", e.date, e.oldDate),
    "dp.update": e => console.log("viewDate changed", e.viewDate, e.change),
}

Customize Single Input

You should use options in settings.py file to apply to all widget instances. If you need to customize a single widget input pass attrs and options directly to widget instance.

# File: forms.py
from bootstrap_datepicker_plus.widgets import DatePickerInput
from .models import Event
from django import forms

class ToDoForm(forms.Form):
    todo = forms.CharField()
    deadline_date = forms.DateField(widget=DatePickerInput(
        attrs={"class": "my-exclusive-input"},
        options={
            "format": "MM/DD/YYYY",
            "showTodayButton": False,
        },
    ))

JavaScript events and some options can only be set using JavaScript. Starting from v5.0, you can set events and options for a specific widget for a widget with field name deadline_date like below in your html template inside a <script> tag.

// Applies to a widget with field name `deadline_date`
window.dbdpOptions_deadline_date = {
    widgetParent: jQuery("#myWidgetParent"),
}
window.dbdpEvents_deadline_date = {
    "dp.change": (e) => console.log("Deadline changed:", e.date?.format('YYYY-MM-DD')),
    "dp.show": e => console.log("Deadline picker opened"),
    "dp.hide": e => console.log("Deadline picker closed", e.date),
    "dp.error": e => console.log("Invalid date input", e.date, e.oldDate),
    "dp.update": e => console.log("viewDate changed", e.viewDate, e.change),
}