Bootstrap 5 Date Picker
Bootstrap 5 does not ship a native date picker widget, but you can build one using the HTML5 date input type styled with Bootstrap's form-control class, optionally enhanced with a lightweight JavaScript library such as Flatpickr or Pikaday. Use a date picker any time a user must supply a calendar date, such as booking an appointment, setting a deadline, or filtering records by date range. It replaces free-text date entry, reducing validation errors and improving data consistency.
Bootstrap class
.form-control (type="date")Common use cases
- Hotel and travel booking forms where guests must select check-in and check-out dates from a calendar overlay
- Project management dashboards where users set task due dates or milestone deadlines directly on a card or modal
- Event registration pages that restrict selectable dates to only those on which the event is available, disabling all others
- HR leave-request forms that highlight weekends and public holidays as non-selectable and enforce a minimum advance-notice period
Variants and classes
| Variant | Description and classes |
|---|---|
| Native date input | Browser date picker styled like other inputs.form-control + type="date" |
| Date and time | Picks a date and a time together.form-control + type="datetime-local" |
| Min and max | Limits the selectable range.min / max attributes |
| With icon | Calendar icon joined to the input.input-group + input-group-text |
Code example
<div class="mb-3">
<label for="appointmentDate" class="form-label fw-semibold">Appointment Date</label>
<input
type="date"
class="form-control"
id="appointmentDate"
name="appointmentDate"
min="2025-01-01"
max="2025-12-31"
required
/>
<div class="form-text">Select a date between 1 Jan and 31 Dec 2025.</div>
</div>
<!-- Flatpickr-enhanced version -->
<div class="mb-3">
<label for="departureDate" class="form-label fw-semibold">Departure Date</label>
<input
type="text"
class="form-control"
id="departureDate"
placeholder="DD/MM/YYYY"
autocomplete="off"
/>
<div class="form-text">Choose your earliest available departure.</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
flatpickr("#departureDate", {
dateFormat: "d/m/Y",
minDate: "today",
disableMobile: true
});
</script>Live examples
Basic Date Picker
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Canvas Builder generated date picker with custom colours
- Date Picker with interactive states
- Responsive date picker for all screen sizes
Best practices
Always set min and max attributes for bounded date fields
Adding min and max to a date input prevents users from choosing logically impossible values, such as a return date before a departure date, without writing a single line of JavaScript. Pair them with server-side validation because browser constraints can be bypassed.
Override Flatpickr's calendar colours to match your Bootstrap theme
Flatpickr exposes CSS custom properties like --flatpickr-selected-bg, so you can set them to your brand's primary colour with one CSS rule rather than overriding individual selectors. This keeps the calendar visually consistent with your Bootstrap buttons and form controls.
Use disableMobile: true in Flatpickr for a consistent cross-platform UI
On iOS and Android, Flatpickr falls back to the native date picker by default, which looks and behaves differently across devices. Setting disableMobile: true forces your custom calendar on every device, giving a uniform experience at the cost of native keyboard integration.
Pair date inputs with aria-describedby for accessibility
Link your form-text hint to the input using aria-describedby="appointmentDateHelp" so screen readers announce the accepted date range or format immediately after reading the field label, removing ambiguity for keyboard-only users.