Date and range pickers on a sunken trigger: a popover holds the calendar, presets like Last 7 days and Apply/Cancel, plus a segmented date field whose digits roll as you step them.
date pickerdate rangepresetsdate fieldformcalendar
Installation
$npx shadcn@latest add @geturui/date-picker
Usage
usage.tsx
1import { DateField, DatePicker, DateRangePicker, type DateRange } from "@/components/ui/date-picker";
2
3export function ReportControls() {
4 const [launch, setLaunch] = React.useState<Date | null>(null);
5 const [period, setPeriod] = React.useState<DateRange>({ start: null, end: null });
6 return (
7 <>
8 <DatePicker label="Launch date" value={launch} onValueChange={setLaunch} />
9 <DateRangePicker label="Report period" value={period} onValueChange={setPeriod} />
10 <DateField label="Renewal date" />
11 </>
12 );
13}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue / onValueChange | Date | null (DatePicker) · DateRange (DateRangePicker) | — | Committed value; changes only on Apply. |
label / hint / error / required | ReactNode / boolean | — | Wired through Field, including aria-describedby and the error shake. |
size | "sm" | "md" | "lg" | "md" | Trigger height 32 / 40 / 48. |
today | Date | — | Reference day for the marker, presets and Today button. Omit to read the clock after hydration. |
min / max / disabledDates / isDateDisabled / highlightedDates / weekStartsOn | see Calendar | — | Passed to the calendar. |
confirm | boolean | true | DatePicker: require Apply. When false, picking a day commits and closes. |
presets | DatePreset[] | false | defaultRangePresets | DateRangePicker: { id, label, range(today) } quick ranges in a side column (a scroll row on phones). |
numberOfMonths | 1 | 2 | — | DateRangePicker: defaults to 2 from 640px up, 1 below. |
open / defaultOpen / onOpenChange / align | boolean / start | center | end | — | Popover state and alignment. |
DateField | component | — | Segmented mm/dd/yyyy input: value, onValueChange, order (mdy | dmy | ymd), min, max, name, size, label, hint, error, bare. |
Accessibility
- The trigger is a button labelled by the field label plus the current value; the popover is a labelled dialog that returns focus on close and cancels on Escape.
- DateField segments are spinbuttons with aria-valuetext ("October"); arrows step, digits type and auto-advance, Backspace clears.
- Presets are toggle buttons with aria-pressed; the selected length is announced politely.
- The calendar inside follows the APG date grid keyboard pattern.