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.
Primary Class
.date-pickerCommon 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 & Classes
| Variant | Description |
|---|---|
| Date Picker Default | Standard date picker with Bootstrap's default styling. |
| Date Picker Responsive | Responsive variant that adapts to different screen sizes. |
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 Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓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.