Date picker
Choose a date without losing context.
pnpm dlx shadcn@latest add @uiarc/date-pickerLive · keyboard ready
- A date field in a form, such as a start or due date.
- Dates with limits or blocked days, shown in a locale format.
- Use calendar inline when the grid should stay visible.
- Use time-picker for times, and pair it with this for a full timestamp.
Installation
Add Date picker with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/date-pickerAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { DatePicker } from "@/registry/components/date-picker/date-picker"; export function StartDateField() { const [start, setStart] = useState<Date>(); return ( <DatePicker label="Start date" value={start} onChange={setStart} minDate={new Date()} showToday /> );}DatePicker
A field button that opens Calendar in a popover and shows the date with per-part rolling.
PropTypeDefaultDescription
labelRequiredstring–Visible label tied to the trigger.valueDate–Selected date.onChange(date: Date | undefined) => void–Called on pick and with undefined from the Clear button.descriptionstring–Helper copy under the field.placeholderstring"Select a date"Shown with no value.minDateDate–Earliest selectable day.maxDateDate–Latest selectable day.disabledDates(date: Date) => boolean–Return true to block a day.localestring"en-US"Formatting and calendar locale.formatIntl.DateTimeFormatOptions{ month: "short", day: "numeric", year: "numeric" }How the value is shown.showTodayboolean–Adds a Today button to the calendar header....propsOmit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onChange">–Forwarded to the trigger button, including id, disabled, and className (applied to the root).- EnterorSpaceorArrowDown
- Opens the calendar and focuses the selected or current day.
- Escape
- Closes the popover and returns focus to the trigger.
- Calendar keys
- Arrows, Home, End, PageUp, and PageDown navigate days as in Calendar.
- Trigger has aria-haspopup="dialog" and aria-expanded; the popover is role="dialog" labelled "<label> calendar".
- The formatted value lives in a visually hidden span; the rolling text is aria-hidden.
- Tabbing out or clicking outside closes it, and focus returns to the trigger when it was inside.
- Changed date parts roll up for a later date and down for an earlier one; the popover springs in and closes about 240 ms after a pick so the highlight can land.
- Reduced motion crossfades the value and closes immediately after a pick.
- The popover is min(320px, 100vw minus 32px) wide, left-aligned to the field.
- Below 360px of viewport the popover stretches to both field edges.
- It closes on any pointerdown outside, so a tap elsewhere dismisses it.
- The calendar mounts only while open, and changed date parts roll with layout position animation.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a date field in forms. Use calendar inline when the grid should stay visible, and time-picker for times.
- value is controlled only. There is no name prop; serialize the Date into a hidden input for plain forms.
The full library index for assistants is at /llms.txt.