React Date Picker Component Examples

The default DatePicker renders a button trigger with a CalendarDays icon and the placeholder text. Click the button and a calendar grid opens below. Pass selected as Date | undefined and onSelect as the setter — react-day-picker handles day clicks via the wrapped Calendar, and the popover dismisses automatically once a date is picked.

Because the DatePicker source lives in your repo after install, swapping the trigger styling or adding an extra aria-label is a local edit. The minimum viable integration is below: a controlled useState<Date | undefined> bound to the component, no wrapper div needed.

DatePicker.Range is mounted on the same root via dot notation. The selected prop narrows to DateRange | undefined, where DateRange = { from: Date; to?: Date }, re-exported from react-day-picker. The first click sets from, the second click sets to, and the trigger label formats as Apr 1 – Apr 7. The popover stays open between clicks and only closes when the range completes, so the user does not have to reopen the trigger to set the second date.

This pattern fits booking flows, leave requests, reporting period filters, and any UI where two related dates need to be picked together. For the inline (non-popover) version of range selection, use Calendar.Range directly.

Paginating month-by-month is fine for next Tuesday and miserable for a 1987 birthday. Pass variant="dropdown" and the month-and-year caption becomes a pair of <select> elements the user can jump through directly. The default window is today's year plus and minus twenty; fromYear and toYear widen it — fromYear={1900} for date of birth, toYear={2050} for card expiry, or any bounded historical range for a reporting filter.

Both props forward straight through to the wrapped Calendar, which converts them into the startMonth and endMonth Date objects react-day-picker expects and swaps in the dropdown caption layout. There is no date-fns helper to import and no caption template to write — one prop changes the interaction model. Note that variant, fromYear, and toYear are single-date props: DatePicker.Range takes the base props only, so a range picker keeps the paging caption.

By default the trigger label uses toLocaleDateString with month: "short", day: "numeric", year: "numeric" — Apr 27, 2026. Pass a formatDate function to override how the selected date renders. The function takes a Date and returns a string; Drivn shows whatever you return inside the trigger button.

A common case is European day-month-year ordering or a tighter MM/DD/YYYY. Build the formatter inline or import a shared one from your i18n module — the prop accepts any (date: Date) => string. The same function applies whether you pass a single date or compose DatePicker.Range, where the formatter runs against both from and to separately.

Pass a locale from react-day-picker/locale and the trigger label, weekday headers, month names, and first-day-of-week all update together. A Czech locale (cs) shifts the grid to start on Monday and renders month names as leden / únor / březen. No provider, no separate i18n setup — the locale is plain data passed by prop.

Dozens of locales ship pre-built in react-day-picker/locale. Pick the one matching your app's active locale and pass it in. If your translation layer already resolves a locale string, wire it through React context and the DatePicker reads from there. For tokens that affect the calendar appearance beyond what locale objects cover, see the theming docs.