Ein flexibler Kalender als Popover oder inline – für einzelne Daten, mehrere Tage oder ganze Zeiträume, ausgelöst über ein Eingabefeld oder einen Button.

Der Datepicker von Bootstrap 6 baut auf Vanilla Calendar Pro auf und verpackt die Bibliothek in eine einheitliche, barrierearme Komponente. Konfiguriert wird er per Data-Attribut oder JavaScript.

• Input oder Button: Kalender als Popup an einem Feld oder an einem Button.
• Auswahlmodi: einzelnes Datum, mehrere Daten oder Zeitraum.
• Mehrere Monate: nebeneinander angezeigt, ideal für Zeiträume.
• Inline-Modus: dauerhaft sichtbarer Kalender, optional an ein Hidden-Input gebunden.
• Farbmodi: folgt data-bs-theme oder erhält ein eigenes Theme.
• Erweiterbar: beliebige Vanilla-Calendar-Pro-Optionen über vcpOptions.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Übersicht

Im einfachsten Fall genügt ein Textfeld mit data-bs-toggle="datepicker".

<label for="datepicker1" class="form-label">Datepicker</label>
<input type="text" class="form-control w-12" id="datepicker1" data-bs-toggle="datepicker" autocomplete="off" placeholder="Datum wählen…">

Die Breiten-Utility .w-12 sorgt dafür, dass das Datumsformat ins Feld passt, und deutet zugleich an, welche Art von Eingabe erwartet wird.

Funktionsweise

• data-bs-toggle="datepicker" an einem <input> aktiviert den Datepicker.
• Verwende type="text", damit sich der native Datumsdialog des Browsers nicht einmischt.
• Bei Fokus erscheint der Kalender unter dem Feld.
• Die Auswahl eines Datums übernimmt den Wert und schließt den Kalender.
• Er schließt außerdem bei Klick außerhalb, mit Escape oder wenn der Fokus das Element verlässt.
• Bootstraps Farbmodi (data-bs-theme) werden berücksichtigt.
• Per JavaScript lassen sich über vcpOptions alle Optionen von Vanilla Calendar Pro durchreichen.

Beispiele

Mit Form Field

Mit der Form-Field-Komponente stapelst du Label, Feld, Hilfetext und Validierungsmeldungen untereinander.

<div class="form-field">
  <label for="datepicker2" class="form-label">Datepicker-Feld</label>
  <input type="text" class="form-control w-12" id="datepicker2" data-bs-toggle="datepicker" autocomplete="off" placeholder="Datum wählen…">
  <div class="form-text">
    Wir geben deine E-Mail-Adresse niemals weiter.
  </div>
</div>

Mit Icon

Mit der Form-Adorn-Komponente stellst du ein Kalender-Icon neben das Feld. Liegt das Input in einem .form-adorn-Wrapper, richtet sich der Kalender automatisch am Wrapper statt am Feld aus.

<label for="datepickerIconStart" class="form-label">Datum auswählen</label>
<div class="form-control form-adorn w-12">
  <div class="form-adorn-icon">
    <svg class="bi" width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/></svg>
  </div>
  <input type="text" class="form-ghost" id="datepickerIconStart" data-bs-toggle="datepicker" autocomplete="off" placeholder="Datum wählen…">
</div>

Minimal- und Maximaldatum

Mit data-bs-date-min und data-bs-date-max grenzt du den wählbaren Zeitraum ein.

<label for="datepickerMinMax" class="form-label">Veranstaltungsdatum (nur 2026)</label>
<input type="text" class="form-control w-12" id="datepickerMinMax" data-bs-toggle="datepicker" autocomplete="off" data-bs-date-min="2026-01-01" data-bs-date-max="2026-12-31" placeholder="Datum in 2026 wählen">

Mehrere Daten

data-bs-selection-mode="multiple" erlaubt die Auswahl mehrerer einzelner Tage.

<label for="datepicker3" class="form-label">Mehrere Daten wählen</label>
<input type="text" class="form-control" id="datepicker3" data-bs-toggle="datepicker" autocomplete="off" data-bs-selection-mode="multiple" placeholder="Daten wählen…">

Zeiträume und mehrere Monate

Mehrere Monate

Mit data-bs-display-months-count (Option displayMonthsCount) zeigst du mehrere Monate nebeneinander – hilfreich, wenn bei Zeiträumen mehr Überblick nötig ist.

<label for="datepickerMultiMonth" class="form-label">Zeitraum wählen</label>
<input type="text" class="form-control" id="datepickerMultiMonth" data-bs-toggle="datepicker" autocomplete="off" data-bs-selection-mode="multiple-ranged" data-bs-display-months-count="2" placeholder="Start- und Enddatum wählen">

Zeitraum

Mit data-bs-selection-mode="multiple-ranged" wählst du einen zusammenhängenden Zeitraum. Über data-bs-selected-dates gibst du einen Zeitraum vor.

<label for="datepicker4" class="form-label">Zeitraum wählen</label>
<input type="text" class="form-control" id="datepicker4" data-bs-toggle="datepicker" autocomplete="off" data-bs-selection-mode="multiple-ranged" data-bs-selected-dates='["2026-06-10", "2026-06-18"]' placeholder="Start- und Enddatum wählen…">

Zeitraum über zwei Monate

Für Zeiträume über Monatsgrenzen hinweg kombinierst du data-bs-selection-mode="multiple-ranged" mit data-bs-display-months-count="2".

<label for="datepickerRangeTwoMonths" class="form-label">Zeitraum wählen</label>
<input type="text" class="form-control" id="datepickerRangeTwoMonths" data-bs-toggle="datepicker" autocomplete="off" data-bs-selection-mode="multiple-ranged" data-bs-display-months-count="2" data-bs-selected-dates='["2026-06-25", "2026-07-08"]' placeholder="Start- und Enddatum wählen…">

Optionen

Erster Wochentag

Mit data-bs-first-weekday legst du den ersten Tag der Woche fest (0 = Sonntag, 1 = Montag usw.).

<label for="datepicker6" class="form-label">Woche beginnt am Sonntag</label>
<input type="text" class="form-control w-12" id="datepicker6" data-bs-toggle="datepicker" autocomplete="off" data-bs-first-weekday="0" placeholder="Datum wählen">

Platzierung

data-bs-placement bestimmt, wo der Kalender relativ zum Feld erscheint: left (Standard), center, right oder auto.

<div class="d-flex gap-3">
  <div>
    <label for="datepickerLeft" class="form-label">Links ausgerichtet</label>
    <input type="text" class="form-control" id="datepickerLeft" data-bs-toggle="datepicker" autocomplete="off" data-bs-placement="left" placeholder="Links">
  </div>
  <div>
    <label for="datepickerCenter" class="form-label">Zentriert</label>
    <input type="text" class="form-control" id="datepickerCenter" data-bs-toggle="datepicker" autocomplete="off" data-bs-placement="center" placeholder="Mitte">
  </div>
  <div>
    <label for="datepickerRight" class="form-label">Rechts ausgerichtet</label>
    <input type="text" class="form-control" id="datepickerRight" data-bs-toggle="datepicker" autocomplete="off" data-bs-placement="right" placeholder="Rechts">
  </div>
</div>

Button als Auslöser

Statt eines Eingabefelds kann auch ein Button den Kalender öffnen – etwa für Datumsfilter in Dashboards. Mit data-bs-datepicker-display am Textelement bleibt das Icon erhalten, wenn sich das Datum ändert.

<button type="button" class="btn-outline theme-secondary" data-bs-toggle="datepicker">
  <svg class="bi" width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/></svg>
  <span data-bs-datepicker-display>Datum wählen</span>
</button>

Für Zeiträume (z. B. Zeitfilter im Dashboard) setzt du data-bs-selection-mode="multiple-ranged". Der Kalender schließt, sobald Start- und Enddatum gewählt sind.

<button type="button" class="btn-outline theme-secondary" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged">
  <svg class="bi" width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/></svg>
  <span data-bs-datepicker-display>Letzte 7 Tage</span>
</button>

Alternativ zeigst du das gewählte Datum über die Option displayElement in einem separaten Element an:

const datepicker = new bootstrap.Datepicker(buttonElement, {
  selectionMode: 'multiple-ranged',
  displayElement: '#date-display' // Selector or element
})

Inline-Modus

Mit data-bs-inline="true" wird der Kalender direkt in die Seite eingebettet – ohne Popup, dauerhaft sichtbar.

<div data-bs-toggle="datepicker" data-bs-inline="true"></div>

Inline mit Zeitraumauswahl:

<div data-bs-toggle="datepicker" data-bs-inline="true" data-bs-selection-mode="multiple-ranged"></div>

Mehrere Monate inline:

<div data-bs-toggle="datepicker" data-bs-inline="true" data-bs-display-months-count="2"></div>

Für Formulare legst du ein Hidden-Input in den Container. Es erhält die gewählten Daten im Format YYYY-MM-DD.

<form>
  <div data-bs-toggle="datepicker" data-bs-inline="true">
    <input type="hidden" name="selected_date">
  </div>
  <button type="submit" class="btn-solid theme-primary mt-3">Absenden</button>
</form>

Eigene Datumsformate

Die Darstellung steuerst du mit der Option dateFormat. Übergib ein Optionsobjekt für Intl.DateTimeFormat oder eine eigene Funktion.

// Using Intl.DateTimeFormat options
const datepicker = new bootstrap.Datepicker(element, {
  dateFormat: { month: 'short', day: 'numeric', year: 'numeric' }
  // Output: "Dec 23, 2026 – Dec 28, 2026"
})

// Using a custom function
const datepicker = new bootstrap.Datepicker(element, {
  dateFormat: (date, locale) => {
    return date.toLocaleDateString(locale, { month: 'short', day: 'numeric' })
  }
  // Output: "Dec 23 – Dec 28"
})

Dark Mode

Der Datepicker passt sich Bootstraps Farbmodi automatisch an. Steht data-bs-theme="dark" an einem Elternelement oder am <html>-Tag, übernimmt auch das Kalender-Popup dieses Theme.

Vom Elternelement geerbt

Hat ein Elternelement ein Theme, erben es Feld und Kalender gleichermaßen.

<div data-bs-theme="dark" class="p-3 bg-body fg-body rounded">
  <label for="datepickerDark" class="form-label">Datepicker im Dark Mode</label>
  <input type="text" class="form-control" id="datepickerDark" data-bs-toggle="datepicker" autocomplete="off" placeholder="Datum wählen">
</div>

Eigenes Theme nur für den Kalender

Mit data-bs-datepicker-theme erhält das Popup ein eigenes Theme, unabhängig vom Feld – etwa ein helles Feld mit dunklem Kalender oder umgekehrt.

<label for="datepickerTheme" class="form-label">Helles Feld, dunkler Kalender</label>
<input type="text" class="form-control w-12" id="datepickerTheme" data-bs-toggle="datepicker" autocomplete="off" data-bs-datepicker-theme="dark" placeholder="Datum wählen">

Shadow DOM

Der Kalender lässt sich auch in einem Shadow Root rendern, etwa in gekapselten Web Components. Zwei Dinge sind dabei anders:

• Initialisiere den Datepicker per JavaScript. Delegierte Events werden an der Shadow-Grenze umgelenkt, data-bs-toggle="datepicker" erreicht Elemente im Shadow Root daher nicht.
• Übernimm Bootstraps Stylesheet in den Shadow Root. Styles des Dokuments wirken dort nicht, sonst bleibt der Kalender ungestylt.

const sheet = new CSSStyleSheet()
sheet.replaceSync(await (await fetch('/path/to/bootstrap.min.css')).text())

const root = host.attachShadow({ mode: 'open' })
root.adoptedStyleSheets = [sheet]
root.innerHTML = '<input type="text" id="shadowDatepicker">'

new bootstrap.Datepicker(root.getElementById('shadowDatepicker'))

Verwendung

Per Data-Attribute

data-bs-toggle="datepicker" an einem Eingabefeld initialisiert den Datepicker.

<input type="text" class="form-control" data-bs-toggle="datepicker">

Per JavaScript

const datepickerEl = document.getElementById('myDatepicker')
const datepicker = new bootstrap.Datepicker(datepickerEl, {
  selectionMode: 'single',
  firstWeekday: 1
})

Optionen

Erweiterte Konfiguration

Funktionen, die Bootstrap nicht direkt als Option anbietet, setzt du über vcpOptions:

const datepicker = new bootstrap.Datepicker(element, {
  vcpOptions: {
    disableDatesPast: true,                     // Disable past dates
    disableWeekdays: [0, 6],                    // Disable weekends
    disableDates: ['2026-12-25', '2026-12-26'], // Disable specific dates
    selectedHolidays: ['2026-01-01']            // Highlight holidays
  }
})

Alle Einstellungen findest du in der Dokumentation von Vanilla Calendar Pro. Beachte: Bootstrap bindet nur die Erweiterung months ein, die displayMonthsCount benötigt. Optionen anderer Erweiterungen – etwa animation, enableSwipe, selectionTimeMode, popups und die Wochenansicht – werden nicht unterstützt und führen zu einem Fehler.

Methoden

Events

const datepickerEl = document.getElementById('myDatepicker')
datepickerEl.addEventListener('change.bs.datepicker', event => {
  console.log('Selected dates:', event.dates)
})

Die CSS-Variablen des Datepickers findest du in der Originaldoku.