Date Picker

Installation

$ npx shadcn@latest add https://goodui.dev/r/date-picker.json

The file lands in components/goodui/date-picker.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/date-picker works too.

Usage

import * as React from "react"
import { DatePicker, type DateRange } from "@/components/goodui/date-picker"

export function BookingFields({ bookedDays }: { bookedDays: Date[] }) {
  const [when, setWhen] = React.useState<Date | null>(null)
  const [period, setPeriod] = React.useState<DateRange | null>(null)
  const [today, setToday] = React.useState<Date>()
  React.useEffect(() => setToday(new Date()), [])

  return (
    <form className="grid gap-4">
      <label htmlFor="when" className="text-sm font-medium">Appointment</label>
      <DatePicker
        id="when"
        className="w-full"
        time
        minuteStep={30}
        min={today}
        disabledWeekdays={[0]}
        booked={bookedDays}
        presets
        value={when}
        onValueChange={setWhen}
        name="startsAt"
      />
      <DatePicker mode="range" presets max={today} value={period} onValueChange={setPeriod} aria-label="Report period" />
    </form>
  )
}

When to use

Examples

<DatePicker inline mode="range" months={2} weekNumbers booked={booked} value={stay} onValueChange={setStay} aria-label="Stay dates" />

<DatePicker
  mode="range"
  aria-label="Billing period"
  presets={[
    { label: "This quarter", value: (t) => ({ from: new Date(t.getFullYear(), Math.floor(t.getMonth() / 3) * 3, 1), to: t }) },
    { label: "Year to date", value: (t) => ({ from: new Date(t.getFullYear(), 0, 1), to: t }) },
  ]}
/>

<DatePicker
  locale="de-DE"
  aria-label="Rechnungsdatum"
  labels={{ openCalendar: "Kalender öffnen", dialog: "Datum wählen", prevMonth: "Vorheriger Monat", nextMonth: "Nächster Monat", today: "Heute", formatDay: "TT", formatMonth: "MM", formatYear: "JJJJ" }}
/>

API reference

Accessibility

• •The popover is role="dialog" with aria-modal and keeps focus inside (WAI-ARIA date picker dialog). The calendar button has aria-haspopup="dialog", aria-expanded and aria-controls; focus returns to it (or the field) on close.
• •Each month is a role="grid" table labelled by its caption, with weekday column headers (abbr holds the full weekday name). Days are buttons with a full date label such as “Tuesday, November 24, 2026”, plus “Today”, “Booked” or “Unavailable” when they apply; the cell carries aria-selected.
• •Roving tabindex: the grid is a single tab stop and arrow keys move a real focus. Disabled and booked days stay focusable (so keyboard users can pass over them) but have aria-disabled and cannot be picked.
• •The visible month is announced in a polite live region when it changes. Week numbers are row headers named “Week 47”.
• •The text field has no visible label of its own: use aria-label or id with <label htmlFor>. Invalid typed input sets aria-invalid and an alert with labels.invalid.
• •Names, digits, weekday headers and the typed format come from Intl for the locale prop; every built-in string is in labels.

Motion

• •slide (default): the popover moves 8px in; changing the month slides the grid 36px toward the direction of travel (mirrored in RTL) with a fade, on a spring (stiffness 420, damping 36, mass 0.7). fade: the popover fades and months crossfade. scale: the popover grows from 0.95 and the month/year grids from 0.94, months slide as in slide.
• •The popover closes with a 120 ms fade. The range band follows the pointer (and keyboard focus) as a lighter preview before the end is picked.
• •Reduced motion: popover, months and grids only fade (120 ms), and CSS transitions on the field and days are off.

• •No dependencies: date math uses the Date constructor in local time, and all Intl formatters are created once per locale.
• •Grids always have six rows, so switching months never changes the height. The popover mounts only while open.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related