{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "date-picker", "title": "Date Picker", "author": "Ballmac ", "description": "A button that opens a calendar popover to choose one date, with presets, month and year selects, min and max dates, clearing, invalid state and form submission.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/calendar.json", "https://ui.ballmac.com/r/popover.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/date-picker.tsx", "content": "// Ballmac UI: Date Picker. https://ui.ballmac.com/components/date-picker\n\"use client\";\n\nimport * as React from \"react\";\nimport { CalendarDays, X } from \"lucide-react\";\nimport { Calendar } from \"@/components/ballmac/calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ballmac/popover\";\nimport { cn } from \"@/lib/utils\";\nimport { useLocale, useMessages } from \"@/lib/ballmac/i18n\";\n\ntype DatePickerPreset = {\n /** Button label, for example \"Tomorrow\". */\n label: string;\n /** The date the preset selects. Build it with `new Date(y, m, d)` so it is local midnight. */\n date: Date;\n};\n\ntype DatePickerProps = Omit<\n React.ComponentProps<\"button\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n /** Controlled date. Pass `null` for a controlled empty value; `undefined` leaves the picker uncontrolled. */\n value?: Date | null;\n /** Initial date when uncontrolled. */\n defaultValue?: Date;\n /** Called with the new date, or `undefined` when cleared. */\n onValueChange?: (date: Date | undefined) => void;\n /** Text on the trigger when no date is chosen. */\n placeholder?: string;\n /** Locale for the trigger text and calendar. The default keeps server and browser output identical. */\n locale?: string;\n /** Formatting options for the trigger text. */\n format?: Intl.DateTimeFormatOptions;\n /** Earliest selectable date. */\n minDate?: Date;\n /** Latest selectable date. */\n maxDate?: Date;\n /** Quick picks shown beside the calendar. */\n presets?: DatePickerPreset[];\n /** Show a control that clears the date. */\n clearable?: boolean;\n /** Mark the field invalid (`aria-invalid`, destructive border). */\n invalid?: boolean;\n /** Name of a hidden input that submits the date as YYYY-MM-DD. */\n name?: string;\n /** Show month and year selects in the calendar header. */\n dropdowns?: boolean;\n};\n\nfunction toIso(d: Date) {\n const m = String(d.getMonth() + 1).padStart(2, \"0\");\n const day = String(d.getDate()).padStart(2, \"0\");\n return `${d.getFullYear()}-${m}-${day}`;\n}\nconst sameDay = (a?: Date, b?: Date) => !!a && !!b && toIso(a) === toIso(b);\n\n/** A button that opens a calendar popover to choose one date, with optional presets and form submission. */\nfunction DatePicker({\n value: valueProp,\n defaultValue,\n onValueChange,\n placeholder,\n locale,\n format = { dateStyle: \"medium\" },\n minDate,\n maxDate,\n presets,\n clearable = false,\n invalid = false,\n name,\n dropdowns = false,\n disabled,\n className,\n \"aria-label\": ariaLabel,\n ...props\n}: DatePickerProps) {\n const defaultLocale = useLocale()\n locale ??= defaultLocale\n const msg = useMessages()\n placeholder ??= msg(\"date-picker.placeholder\", \"Pick a date\")\n const [open, setOpen] = React.useState(false);\n const [inner, setInner] = React.useState(defaultValue);\n const value = valueProp === undefined ? inner : (valueProp ?? undefined);\n const choose = (next: Date | undefined) => {\n setInner(next);\n onValueChange?.(next);\n if (next) setOpen(false);\n };\n const text = value ? new Intl.DateTimeFormat(locale, format).format(value) : placeholder;\n return (\n \n
\n \n \n {text}\n \n {clearable && value && !disabled && (\n choose(undefined)}\n className=\"absolute top-1/2 end-2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n >\n \n \n )}\n {name && }\n
\n \n
\n {presets && presets.length > 0 && (\n
\n {presets.map((p) => (\n choose(p.date)}\n className=\"h-8 rounded-md px-2.5 text-start text-sm outline-none transition-colors hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-pressed:bg-accent aria-pressed:font-medium\"\n >\n {p.label}\n \n ))}\n
\n )}\n \n
\n \n \n );\n}\n\nexport { DatePicker, type DatePickerProps, type DatePickerPreset };\n", "type": "registry:ui", "target": "@components/ballmac/date-picker.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "date", "input", "popover", "form" ], "version": "1.0.0", "updated": "2026-09-30", "ai": { "summary": "Give it a defaultValue or value and onValueChange. presets add quick picks, dropdowns adds month and year selects, name submits YYYY-MM-DD.", "whenToUse": [ "A single date in a form", "Deadlines, birthdays and delivery dates", "When quick picks like Tomorrow help" ], "whenNotToUse": [ "A date range; use date-range-picker", "An always-visible calendar; use calendar" ], "composesWith": [ "field", "calendar", "popover" ], "a11y": [ { "keys": "Enter / Space / ArrowDown", "action": "Opens the calendar from the trigger" }, { "keys": "Arrow keys", "action": "Move between days" }, { "keys": "Escape", "action": "Closes and returns focus to the trigger" } ], "customization": [ "presets", "dropdowns for distant dates", "minDate and maxDate", "format (Intl options) and locale", "clearable and invalid" ] }, "examples": [ "date-picker-demo", "date-picker-states" ], "url": "https://ui.ballmac.com/components/date-picker" }, "categories": [ "forms" ], "type": "registry:ui" }