{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "date-picker", "title": "Date Picker", "description": "A compact single-date and range picker with direct month and year selection, accessible calendar navigation, constraints, and form values.", "dependencies": [ "@base-ui/react", "lucide-react", "react-day-picker" ], "files": [ { "path": "registry/rivetui/components/date-picker/date-picker.tsx", "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport { CalendarDays, CalendarRange, ChevronDown, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n type DateRange,\n DayPicker,\n getDefaultClassNames,\n type PropsBase,\n type PropsRange,\n type PropsSingle,\n} from \"react-day-picker\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Calendar({\n captionLayout = \"dropdown\",\n className,\n classNames,\n components,\n defaultMonth,\n endMonth,\n month,\n showOutsideDays = true,\n startMonth,\n ...props\n}: React.ComponentProps) {\n const defaultClassNames = getDefaultClassNames();\n const referenceYear = (month ?? defaultMonth ?? new Date()).getFullYear();\n\n return (\n (\n
\n ),\n Chevron: ({ className: chevronClassName, orientation }) => {\n const Icon = orientation === \"left\" ? ChevronLeft : ChevronRight;\n\n if (orientation === \"up\" || orientation === \"down\") {\n return (\n \n );\n }\n\n return ;\n },\n ...components,\n }}\n {...props}\n />\n );\n}\n\ntype DatePickerProps = Omit<\n React.ComponentProps<\"button\">,\n \"defaultValue\" | \"name\" | \"onChange\" | \"value\"\n> & {\n calendarProps?: Omit;\n dateFormat?: Intl.DateTimeFormatOptions;\n defaultOpen?: boolean;\n defaultValue?: Date;\n formatLocale?: Intl.LocalesArgument;\n name?: string;\n onOpenChange?: PopoverPrimitive.Root.Props[\"onOpenChange\"];\n onValueChange?: (date: Date | undefined) => void;\n open?: boolean;\n placeholder?: string;\n value?: Date;\n};\n\ntype DateRangePickerProps = Omit<\n React.ComponentProps<\"button\">,\n \"defaultValue\" | \"name\" | \"onChange\" | \"value\"\n> & {\n calendarProps?: Omit;\n dateFormat?: Intl.DateTimeFormatOptions;\n defaultOpen?: boolean;\n defaultValue?: DateRange;\n formatLocale?: Intl.LocalesArgument;\n fromName?: string;\n onOpenChange?: PopoverPrimitive.Root.Props[\"onOpenChange\"];\n onValueChange?: (range: DateRange | undefined) => void;\n open?: boolean;\n placeholder?: string;\n toName?: string;\n value?: DateRange;\n};\n\nfunction DatePicker({\n calendarProps,\n children,\n className,\n dateFormat = { dateStyle: \"medium\" },\n defaultOpen,\n defaultValue,\n disabled,\n formatLocale,\n name,\n onOpenChange,\n onValueChange,\n open,\n placeholder = \"Select date\",\n value,\n ...props\n}: DatePickerProps) {\n const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n const selected = value ?? uncontrolledValue;\n const actionsRef = React.useRef(null);\n const formatter = React.useMemo(\n () => new Intl.DateTimeFormat(formatLocale, dateFormat),\n [dateFormat, formatLocale],\n );\n\n const handleSelect = (nextDate: Date | undefined) => {\n if (value === undefined) {\n setUncontrolledValue(nextDate);\n }\n\n onValueChange?.(nextDate);\n\n if (nextDate) {\n actionsRef.current?.close();\n }\n };\n\n const handleClear = () => {\n if (value === undefined) {\n setUncontrolledValue(undefined);\n }\n\n onValueChange?.(undefined);\n actionsRef.current?.close();\n };\n\n return (\n \n \n }\n >\n {children ?? (\n <>\n \n \n {selected ? formatter.format(selected) : placeholder}\n \n \n \n )}\n \n\n \n \n \n
\n \n Date\n \n \n {selected ? formatter.format(selected) : \"Not selected\"}\n \n
\n \n
\n handleSelect(new Date())}\n >\n Today\n \n {selected ? (\n \n Clear\n \n ) : null}\n
\n \n \n \n\n {name ? (\n \n ) : null}\n \n );\n}\n\nfunction DateRangePicker({\n calendarProps,\n children,\n className,\n dateFormat = { dateStyle: \"medium\" },\n defaultOpen,\n defaultValue,\n disabled,\n formatLocale,\n fromName,\n onOpenChange,\n onValueChange,\n open,\n placeholder = \"Select date range\",\n toName,\n value,\n ...props\n}: DateRangePickerProps) {\n const [uncontrolledValue, setUncontrolledValue] = React.useState(\n defaultValue,\n );\n const selected = value ?? uncontrolledValue;\n const actionsRef = React.useRef(null);\n const formatter = React.useMemo(\n () => new Intl.DateTimeFormat(formatLocale, dateFormat),\n [dateFormat, formatLocale],\n );\n\n const handleSelect = (nextRange: DateRange | undefined) => {\n if (value === undefined) {\n setUncontrolledValue(nextRange);\n }\n\n onValueChange?.(nextRange);\n\n if (nextRange?.from && nextRange.to) {\n actionsRef.current?.close();\n }\n };\n\n const handleClear = () => {\n if (value === undefined) {\n setUncontrolledValue(undefined);\n }\n\n onValueChange?.(undefined);\n actionsRef.current?.close();\n };\n\n return (\n \n \n }\n >\n {children ?? (\n <>\n \n \n {formatRange(selected, formatter, placeholder)}\n \n \n \n )}\n \n\n \n \n \n
\n \n Date range\n \n \n {formatRange(selected, formatter, \"Not selected\")}\n \n
\n \n
\n {\n const today = new Date();\n handleSelect({ from: today, to: today });\n }}\n >\n Today\n \n {selected?.from ? (\n \n Clear\n \n ) : null}\n
\n \n \n \n\n {fromName ? (\n \n ) : null}\n {toName ? (\n \n ) : null}\n \n );\n}\n\nfunction formatRange(\n range: DateRange | undefined,\n formatter: Intl.DateTimeFormat,\n placeholder: string,\n) {\n if (!range?.from) {\n return placeholder;\n }\n\n if (!range.to) {\n return `${formatter.format(range.from)} – …`;\n }\n\n return `${formatter.format(range.from)} – ${formatter.format(range.to)}`;\n}\n\nfunction formatInputDate(date: Date) {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, \"0\");\n const day = String(date.getDate()).padStart(2, \"0\");\n\n return `${year}-${month}-${day}`;\n}\n\nexport type { DatePickerProps, DateRangePickerProps };\nexport { Calendar, DatePicker, DateRangePicker };\n", "type": "registry:ui" } ], "type": "registry:ui" }