Question 1

What is a shadcn date picker?

Accepted Answer

A shadcn date picker is a compact button trigger that opens a Calendar in a Popover for selecting a date. It composes the shadcn/ui Calendar primitive (built on react-day-picker) with Popover and Button. Picks one date, fills the trigger button's label with the formatted value, dismisses on selection. The canonical pattern for date fields in forms — booking dates, expiration dates, deadlines, birth dates.

Question 2

Are these date picker examples free?

Accepted Answer

Yes, every date picker example on shadcn.io is free for personal and commercial use. No attribution requirement, no runtime dependency, no gating.

Question 3

Should I use a Date Picker or just an inline Calendar?

Accepted Answer

Date Picker (Button + Popover wrapping Calendar) for date fields inside dense forms — the trigger is compact, the calendar appears on demand, dismisses on selection. Inline Calendar (the calendar examples gallery) for booking flows, scheduling pages, or anywhere date selection is the primary task on screen and the calendar deserves persistent visibility. Pick by whether the field is one-of-many (Picker) or the focal point (Calendar).

Question 4

What about typing the date directly versus picking it?

Accepted Answer

Pure pickers (the standard variant in this gallery) are slower for users who already know the date — they have to scroll to the right month. Add a date Input alongside the Picker (so users can type "03/15/2026" directly) for known-date use cases like date of birth or expiration. Use parse-on-blur to populate the picker's selected state from the typed value, and re-format on selection. Both patterns coexisting is the strongest UX.

Question 5

How do I support a date range (check-in / check-out)?

Accepted Answer

Pass `mode="range"` to the inner Calendar. The selected value becomes `{ from, to }` instead of a single Date. Format the trigger label as "Apr 14 – Apr 21" so users see both endpoints. For booking flows, render two months side-by-side (`numberOfMonths={2}`) so the range can span months without paging — common in Airbnb / Booking.com style pickers.

Question 6

How do I disable past dates or specific blackouts?

Accepted Answer

Pass `disabled` to the Calendar — it accepts a Date, an array, a {from,to} range, or a function `(date) => boolean`. For "no past dates": `disabled={{ before: new Date() }}`. For "sold out": pass an array of unavailable Date objects. The picker still opens but disabled cells are non-clickable and visually muted.

Question 7

How do I localize the picker to non-English locales?

Accepted Answer

react-day-picker accepts a `locale` prop (a date-fns Locale). Pass `import { fr } from "date-fns/locale"` then `locale={fr}` to translate day names, month names, and the start-of-week. Format the trigger button's label using the same locale via `format(date, 'PPP', { locale: fr })` for consistency. For server-rendered pages, pass the locale from the request's Accept-Language header.

Question 8

How do I install a date picker example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/date-picker/…`, plus the shadcn/ui Calendar + Popover + Button primitives (and react-day-picker + date-fns) if you don't already have them.

Question 9

How do I integrate the date picker with react-hook-form?

Accepted Answer

Wrap the Date Picker in a FormField from shadcn/ui's Form primitive. The form value is the selected Date (or undefined). Pass `field.value` to Calendar's `selected` prop and `field.onChange` to `onSelect`. For Zod validation, define the schema as `z.date()` (or `z.date().nullable()` for optional). The trigger button's label updates from `field.value` via your formatter.

Question 10

How do I close the picker when a date is selected?

Accepted Answer

Lift the Popover's open state to a `useState(false)` and call `setOpen(false)` inside the Calendar's onSelect handler. The picker dismisses immediately after selection, which is the expected pattern for single-date selection. For range selection, KEEP the popover open after the first click so users can pick the second endpoint — close only when both `from` and `to` are set.

Question 11

Which libraries do date picker examples depend on?

Accepted Answer

react-day-picker (the calendar engine), date-fns (date arithmetic + locales), shadcn/ui Calendar + Popover + Button (styled wrappers generated into your project), Tailwind CSS, and Lucide React (CalendarIcon for the trigger). React 19 baseline. For form integration, react-hook-form + Zod + shadcn/ui Form are the canonical pairing.

Question 12

Are date picker examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The trigger is a real `<button>` with `aria-haspopup="dialog"`. Opening the popover focuses the calendar grid; arrow keys move between days, PageUp/PageDown between months, Enter selects, Esc closes and returns focus to the trigger. Each day cell has a meaningful `aria-label` ("April 14, 2026, Monday"). The selected date is announced as users navigate.

Question 13

Can I use these date picker examples with React Server Components?

Accepted Answer

The Date Picker is a client component (it manages popover open state, selected date, and calendar navigation). Wrap it in a Server Component parent that fetches contextual constraints (disabled dates, default value) and pass them as props. For form-submission patterns, the picker lives in a client form component, but the page's surrounding layout stays server-rendered.

React Date Picker Examples for shadcn/ui

Browse every date picker example

Frequently Asked Questions