Date Pickers

What is a date picker?

A date picker is a form control for choosing a date, a time or a date range. Typical designs open a small calendar popup from an input, show inline calendars for booking, or combine a date with a time selector. Date pickers are used in booking forms, filters, reports, scheduling tools and checkout flows where a delivery date is chosen.

When to use a date picker

• When users need to see weekdays or nearby dates to choose, such as booking a stay or appointment.
• For date ranges where start and end are related.
• For known dates far in the past, such as a birth date, a plain text input or three separate fields is often faster than a calendar.
• Consider the native <input type="date"> and type="time" first; they give users the familiar picker of their device.

Best practices

• Show the expected format next to the label, for example "DD/MM/YYYY", and accept typed input as well as calendar selection.
• The calendar trigger needs an accessible name such as "Choose date", and the popup should behave like a dialog with focus moving into it and back on close.
• Support keyboard navigation in the calendar grid: arrow keys between days, Page Up and Page Down for months, Enter to select, Escape to close.
• Mark today and the selected date with more than colour, and disable unavailable dates visibly and with aria-disabled.
• Use min and max to limit valid dates and validate on the server too.
• On mobile, make day cells large enough to tap.

Framework versions

The date picker examples on this page include styled native inputs, popup calendars, inline calendars, range pickers and time selectors. Bootstrap 6 versions use theme-* colour roles and ES module scripts. Bootstrap 5 has no built-in date picker, so those versions combine form controls and dropdown positioning with small vanilla JavaScript. Tailwind CSS versions use grid utilities for the calendar, and pure CSS versions restyle the native date input. Preview, copy the HTML, CSS and JS, and adapt the date format to your locale.