Date picker
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.
Week numbers
Add data-bs-week-numbers="true" to show the week number in front of each row.
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 week numbers
Week numbers work in an inline calendar too, and with every selection mode.
Inline with two months
Add data-bs-display-months-count="2" for a wide calendar.