Basic
Add data-bs-toggle="datepicker" to a text input. The calendar opens on focus.
With icon
Wrap the field in .input-icon. The popup lines up with the wrapper, not the input.
Initial value
A value in YYYY-MM-DD is shown on load and the calendar opens on that month.
Min and max
Limit the pickable dates with data-bs-date-min and data-bs-date-max.
Date range
Set data-bs-selection-mode="multiple-ranged" to pick a start and an end date.
Multiple dates
Set data-bs-selection-mode="multiple" to pick any number of dates.
Two months
Add data-bs-display-months-count="2" to show two months side by side.
Week starts on Sunday
Set data-bs-first-weekday="0". The default is Monday.
Placement
Align the popup with data-bs-placement: left, center, right or auto.
Button trigger
Any element works as a trigger. Mark the text with data-bs-datepicker-display so the icon stays.
Events
Listen to change.bs.datepicker to read the picked dates as YYYY-MM-DD.
Inline calendar
Add data-bs-inline="true" to render the calendar in place. It takes the card as its surface.
Inline range
Inline calendars take the same options. This one picks a start and an end date.
Inline in a form
A hidden input inside the calendar submits the picked dates with the form.
Inline with two months
Add data-bs-display-months-count="2" for a wide calendar.