{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "date-picker", "type": "registry:ui", "title": "Date Picker", "description": "A ruled field that opens a desk calendar.", "categories": [ "core" ], "files": [ { "path": "ui/date-picker.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { Calendar } from \"./calendar\";\n\n// Popups render in a layer on that copies the paper type of the nearest [data-paper]\n// element (and follows it if it changes). That keeps their theme without trapping them inside the\n// container's stacking context, so sticky headers can't cover them.\nfunction usePaperContainer() {\n const anchor = React.useRef(null);\n const [container, setContainer] = React.useState();\n React.useEffect(() => {\n const source = anchor.current?.closest(\"[data-paper]\");\n if (!source || source === document.documentElement) return;\n const layer = document.createElement(\"div\");\n layer.setAttribute(\"data-paper-layer\", \"\");\n const sync = () => layer.setAttribute(\"data-paper\", source.getAttribute(\"data-paper\") ?? \"\");\n sync();\n document.body.appendChild(layer);\n const observer = new MutationObserver(sync);\n observer.observe(source, { attributes: true, attributeFilter: [\"data-paper\"] });\n setContainer(layer);\n return () => {\n observer.disconnect();\n layer.remove();\n };\n }, []);\n return [anchor, container] as const;\n}\n\nexport interface DatePickerProps {\n value?: Date;\n defaultValue?: Date;\n onChange?: (date: Date) => void;\n placeholder?: string;\n locale?: string;\n disabled?: (date: Date) => boolean;\n id?: string;\n className?: string;\n}\n\n/** A ruled-line field that opens a desk calendar. */\nexport function DatePicker({\n value,\n defaultValue,\n onChange,\n placeholder = \"Pick a date\",\n locale = \"en-US\",\n disabled,\n id,\n className = \"\",\n}: DatePickerProps) {\n const [inner, setInner] = React.useState(defaultValue);\n const [open, setOpen] = React.useState(false);\n const [anchor, container] = usePaperContainer();\n const date = value ?? inner;\n\n return (\n \n \n );\n}\n" }, { "path": "ui/calendar.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport interface CalendarProps extends Omit, \"onSelect\" | \"defaultValue\"> {\n selected?: Date;\n onSelect?: (date: Date) => void;\n /** Month shown first. Defaults to the selected date or today. */\n defaultMonth?: Date;\n /** 0 = Sunday, 1 = Monday */\n weekStartsOn?: 0 | 1;\n disabled?: (date: Date) => boolean;\n /** BCP 47 locale for month and weekday names. Fixed by default so server and client render the same. */\n locale?: string;\n}\n\nconst type = { fontFamily: \"var(--font-type, 'Courier New', ui-monospace, monospace)\" };\n\nconst sameDay = (a?: Date, b?: Date) =>\n !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\nconst addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);\nconst startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);\n\n/** A desk calendar page. The chosen day gets circled in pen. */\nexport function Calendar({\n selected,\n onSelect,\n defaultMonth,\n weekStartsOn = 1,\n disabled,\n locale = \"en-US\",\n className = \"\",\n ...props\n}: CalendarProps) {\n // No `new Date()` during render: it breaks prerendering and server/client markup can disagree.\n // Without a selected/default date, the current month fills in once mounted.\n const initial = defaultMonth ?? selected;\n const [month, setMonth] = React.useState(initial && startOfMonth(initial));\n const [focus, setFocus] = React.useState(selected ?? defaultMonth);\n const [today, setToday] = React.useState();\n const grid = React.useRef(null);\n const moved = React.useRef(false);\n\n React.useEffect(() => {\n const now = new Date();\n setToday(now);\n setMonth((m) => m ?? startOfMonth(now));\n setFocus((f) => f ?? now);\n }, []);\n\n React.useEffect(() => {\n if (!moved.current) return;\n moved.current = false;\n grid.current?.querySelector('[tabindex=\"0\"]')?.focus();\n }, [focus]);\n\n const first = month && startOfMonth(month);\n const offset = first ? (first.getDay() - weekStartsOn + 7) % 7 : 0;\n const days = first ? Array.from({ length: 42 }, (_, i) => addDays(first, i - offset)) : [];\n const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7));\n const weekdays = Array.from({ length: 7 }, (_, i) =>\n new Intl.DateTimeFormat(locale, { weekday: \"narrow\" }).format(new Date(2024, 0, 7 + weekStartsOn + i)),\n );\n const focusInMonth = !!focus && !!month && focus.getMonth() === month.getMonth() && focus.getFullYear() === month.getFullYear();\n const tabbable = focusInMonth ? focus : first;\n\n const go = (d: Date) => {\n moved.current = true;\n setFocus(d);\n if (!month || d.getMonth() !== month.getMonth() || d.getFullYear() !== month.getFullYear()) setMonth(startOfMonth(d));\n };\n\n const onKeyDown = (e: React.KeyboardEvent, d: Date) => {\n const map: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };\n if (e.key in map) {\n e.preventDefault();\n go(addDays(d, map[e.key]));\n } else if (e.key === \"PageUp\" || e.key === \"PageDown\") {\n e.preventDefault();\n go(new Date(d.getFullYear(), d.getMonth() + (e.key === \"PageUp\" ? -1 : 1), d.getDate()));\n }\n };\n\n const nav = (delta: number) => month && setMonth(new Date(month.getFullYear(), month.getMonth() + delta, 1));\n const navBtn =\n \"flex size-8 cursor-pointer items-center justify-center rounded-[3px] text-[18px] text-(--ink-muted) outline-none hover:bg-(--paper-sunk) hover:text-(--ink) focus-visible:ring-2 focus-visible:ring-(--pen)\";\n\n return (\n \n {/* binding with two rings */}\n

\n {[28, 72].map((x) => (\n \n ))}\n

\n

\n \n

\n

\n {month ? new Intl.DateTimeFormat(locale, { month: \"long\" }).format(month) : \"\\u00a0\"}\n

\n

\n {month?.getFullYear() ?? \"\\u00a0\"}\n

\n

\n \n

\n

\n

\n {weekdays.map((w, i) => (\n \n {w}\n \n ))}\n

\n {weeks.map((week, w) => (\n

\n {week.map((d) => {\n const outside = d.getMonth() !== month?.getMonth();\n const isSel = sameDay(d, selected);\n const isToday = sameDay(d, today);\n const isDisabled = disabled?.(d) ?? false;\n const sunday = d.getDay() === 0;\n return (\n

\n {\n setFocus(d);\n onSelect?.(d);\n }}\n onKeyDown={(e) => onKeyDown(e, d)}\n aria-label={new Intl.DateTimeFormat(locale, { dateStyle: \"full\" }).format(d)}\n aria-current={isToday ? \"date\" : undefined}\n className={`relative mx-auto flex size-9 cursor-pointer items-center justify-center rounded-full text-[14px] tabular-nums outline-none transition-colors hover:bg-(--paper-sunk) focus-visible:ring-2 focus-visible:ring-(--pen) disabled:cursor-not-allowed disabled:line-through disabled:opacity-40 ${\n outside ? \"text-(--ink-faint)\" : sunday ? \"text-(--danger)\" : \"\"\n } ${isToday ? \"font-bold underline decoration-(--pen) decoration-2 underline-offset-4\" : \"\"}`}\n >\n {d.getDate()}\n {isSel && (\n \n )}\n \n

\n );\n })}\n

\n ))}\n

\n \n );\n}\n" } ], "dependencies": [ "radix-ui" ] }