"use client"; import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import type { HTMLAttributes, KeyboardEvent } from "react"; /** Dates are plain ISO strings (YYYY-MM-DD) so values serialize and render the same on server and client. */ export type DateRange = { start: string | null; end: string | null }; export type DateRangeFieldProps = Omit, "onChange" | "defaultValue"> & { label: string; value?: DateRange; defaultValue?: DateRange; onValueChange?: (range: DateRange) => void; startLabel?: string; endLabel?: string; nameStart?: string; nameEnd?: string; min?: string; max?: string; /** Today as YYYY-MM-DD. Pass it from the server to keep the first render deterministic. */ today?: string; locale?: string; /** 0 is Sunday, 1 is Monday. */ weekStartsOn?: 0 | 1; description?: string; error?: string; disabled?: boolean; reducedMotion?: boolean; /** Describes the length of a complete range, for example in nights for a stay. */ durationLabel?: (days: number) => string; }; const DAY = 86_400_000; function cx(...values: Array) { return values.filter(Boolean).join(" "); } function pad(value: number, size = 2) { return String(value).padStart(size, "0"); } function parseISO(value?: string | null): number | null { if (!value) return null; const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value); if (!match) return null; const time = Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3])); return Number.isNaN(time) ? null : time; } function toISO(time: number) { const date = new Date(time); return pad(date.getUTCFullYear(), 4) + "-" + pad(date.getUTCMonth() + 1) + "-" + pad(date.getUTCDate()); } function addMonths(time: number, amount: number) { const date = new Date(time); const target = Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + amount, 1); const lastDay = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + amount + 1, 0)).getUTCDate(); const targetDate = new Date(target); return Date.UTC(targetDate.getUTCFullYear(), targetDate.getUTCMonth(), Math.min(date.getUTCDate(), lastDay)); } function localTodayISO() { const now = new Date(); return now.getFullYear() + "-" + pad(now.getMonth() + 1) + "-" + pad(now.getDate()); } export function DateRangeField({ label, value, defaultValue = { start: null, end: null }, onValueChange, startLabel = "Start date", endLabel = "End date", nameStart, nameEnd, min, max, today, locale, weekStartsOn = 1, description, error, disabled, reducedMotion = false, durationLabel = (days) => days + (days === 1 ? " day" : " days"), className, ...props }: DateRangeFieldProps) { const id = useId(); const startId = id + "-start"; const endId = id + "-end"; const descriptionId = id + "-description"; const errorId = id + "-error"; const dialogId = id + "-calendar"; const headingId = id + "-month"; const [inner, setInner] = useState(defaultValue); const range = value ?? inner; const [open, setOpen] = useState(false); const [focused, setFocused] = useState(() => parseISO(range.start) ?? parseISO(today) ?? Date.UTC(2000, 0, 1)); const [announcement, setAnnouncement] = useState(""); const rootRef = useRef(null); const triggerRef = useRef(null); const gridRef = useRef(null); const minTime = parseISO(min); const maxTime = parseISO(max); const startTime = parseISO(range.start); const endTime = parseISO(range.end); const todayTime = parseISO(today); const formats = useMemo( () => ({ month: new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }), weekdayShort: new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" }), weekdayLong: new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" }), full: new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }), medium: new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }), day: new Intl.DateTimeFormat(locale, { day: "numeric", timeZone: "UTC" }), }), [locale], ); const commit = (next: DateRange) => { if (value === undefined) setInner(next); onValueChange?.(next); }; const clamp = (time: number) => { if (minTime !== null && time < minTime) return minTime; if (maxTime !== null && time > maxTime) return maxTime; return time; }; const isDisabled = (time: number) => (minTime !== null && time < minTime) || (maxTime !== null && time > maxTime); const openCalendar = () => { // Reading the clock only happens on interaction, never during render. setFocused(clamp(startTime ?? todayTime ?? (parseISO(localTodayISO()) as number))); setOpen(true); }; const close = (restoreFocus: boolean) => { setOpen(false); if (restoreFocus) triggerRef.current?.focus(); }; useEffect(() => { if (!open) return; const button = gridRef.current?.querySelector('[data-date="' + toISO(focused) + '"]'); button?.focus(); }, [open, focused]); useEffect(() => { if (!open) return; const onPointerDown = (event: PointerEvent) => { if (rootRef.current && !rootRef.current.contains(event.target as Node)) setOpen(false); }; document.addEventListener("pointerdown", onPointerDown); return () => document.removeEventListener("pointerdown", onPointerDown); }, [open]); const choose = (time: number) => { if (isDisabled(time)) return; const iso = toISO(time); if (startTime === null || endTime !== null || time < startTime) { commit({ start: iso, end: null }); setAnnouncement(startLabel + ": " + formats.full.format(time) + ". Now choose the " + endLabel.toLowerCase() + "."); setFocused(time); return; } commit({ start: range.start, end: iso }); setAnnouncement(endLabel + ": " + formats.full.format(time) + "."); close(true); }; const onGridKeyDown = (event: KeyboardEvent) => { const date = new Date(focused); const weekday = (date.getUTCDay() - weekStartsOn + 7) % 7; const moves: Record number> = { ArrowLeft: () => focused - DAY, ArrowRight: () => focused + DAY, ArrowUp: () => focused - 7 * DAY, ArrowDown: () => focused + 7 * DAY, Home: () => focused - weekday * DAY, End: () => focused + (6 - weekday) * DAY, PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1), PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1), }; const move = moves[event.key]; if (move) { event.preventDefault(); setFocused(clamp(move())); } }; const viewDate = new Date(focused); const viewYear = viewDate.getUTCFullYear(); const viewMonth = viewDate.getUTCMonth(); const firstOfMonth = Date.UTC(viewYear, viewMonth, 1); const leading = (new Date(firstOfMonth).getUTCDay() - weekStartsOn + 7) % 7; const gridStart = firstOfMonth - leading * DAY; const weeks = Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_, day) => gridStart + (week * 7 + day) * DAY)); // 2023-12-31 is a Sunday; offsetting from it yields localized weekday names. const weekdayTimes = Array.from({ length: 7 }, (_, index) => Date.UTC(2023, 11, 31 + ((index + weekStartsOn) % 7))); const rangeError = startTime !== null && endTime !== null && endTime < startTime ? endLabel + " must be on or after the " + startLabel.toLowerCase() + "." : ""; const shownError = error ?? rangeError; const nights = startTime !== null && endTime !== null && endTime >= startTime ? Math.round((endTime - startTime) / DAY) : null; const summary = startTime !== null && endTime !== null && nights !== null ? (formats.medium.formatRange ? formats.medium.formatRange(new Date(startTime), new Date(endTime)) : formats.medium.format(startTime) + " to " + formats.medium.format(endTime)).replace(/[\u2009\u202F]/g, " ") + ", " + durationLabel(nights) : ""; const describedBy = cx(description && descriptionId, shownError && errorId) || undefined; const field = "min-h-11 w-full rounded-md border bg-[#FBFBF8] px-3 text-[15px] tabular-nums text-[#1D211F] outline-none transition-[border-color,box-shadow] motion-reduce:transition-none focus-visible:border-[#1E6B64] focus-visible:ring-2 focus-visible:ring-[#1E6B64]/35 disabled:opacity-60 dark:bg-[#232A29] dark:text-[#E9EBE4] dark:[color-scheme:dark] dark:focus-visible:border-[#7FC4BA] dark:focus-visible:ring-[#7FC4BA]/40 [&::-webkit-calendar-picker-indicator]:hidden"; const iconButton = "grid size-11 place-items-center rounded-md text-[#1D211F] outline-none hover:bg-[#E2E5DC] focus-visible:ring-2 focus-visible:ring-[#1E6B64] dark:text-[#E9EBE4] dark:hover:bg-[#2A3231] dark:focus-visible:ring-[#7FC4BA]"; return (

{label} {description ? (

{description}

) : null}

{startLabel} commit({ start: event.target.value || null, end: range.end })} className={cx(field, "border-[#858B83] dark:border-[#6E7976]")} />

{endLabel} commit({ start: range.start, end: event.target.value || null })} className={cx(field, shownError ? "border-[#A33228] dark:border-[#F0897D]" : "border-[#858B83] dark:border-[#6E7976]")} />

{open ? (

{ if (event.key === "Escape") { event.preventDefault(); close(true); } }} className={cx( "absolute right-0 top-full z-50 mt-2 w-[min(21.5rem,calc(100vw-2rem))] rounded-lg border border-[#D5D8CF] bg-[#FBFBF8] p-3 shadow-[0_12px_32px_-12px_rgba(29,33,31,0.28)] dark:border-[#333C3A] dark:bg-[#1F2524] dark:shadow-[0_12px_32px_-12px_rgba(0,0,0,0.6)]", !reducedMotion && "transition-[opacity,translate] duration-150 ease-out starting:-translate-y-1 starting:opacity-0 motion-reduce:transition-none", )} >

{formats.month.format(firstOfMonth)}

{weekdayTimes.map((time) => ( ))} {weeks.map((week) => ( {week.map((time) => { const iso = toISO(time); const outside = new Date(time).getUTCMonth() !== viewMonth; const isStart = time === startTime; const isEnd = time === endTime; const inRange = startTime !== null && endTime !== null && time > startTime && time < endTime; const unavailable = isDisabled(time); return ( ); })} ))}

{formats.weekdayShort.format(time).slice(0, 2)}

{startTime !== null && endTime === null ? "Choose the " + endLabel.toLowerCase() + "." : "Use arrow keys to move, Enter to choose."}

) : null}

{summary}

{shownError}

{announcement}

); }