"use client"; import { addDays, addMonths, addWeeks, addYears, format, isValid, parse, startOfDay, } from "date-fns"; import * as React from "react"; import type { DateRange, DropdownProps } from "react-day-picker"; import { Button } from "@/components/registry/primitives/core/button"; import { Calendar } from "@/components/registry/primitives/core/calendar"; import { Input } from "@/components/registry/primitives/core/input"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/registry/primitives/core/popover"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/registry/primitives/core/select"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { cn } from "@/lib/registry/cn"; import type { Field } from "@/lib/registry/sitecore"; export function CustomDropdown({ options = [], value, onChange, disabled, name, id, }: DropdownProps) { return ( ); } interface DatePickerProps { selected?: Date | null; onChange?: (date: Date | null) => void; placeholderText?: string; dateFormat?: string; minDate?: Date; maxDate?: Date; showIcon?: boolean; inputClassName?: string; field?: Field; } interface DatePickerNaturalLanguageProps { selected?: Date | null; onChange?: (date: Date | null) => void; placeholderText?: string; minDate?: Date; maxDate?: Date; inputClassName?: string; field?: Field; } interface DatePickerWithInputProps { selected?: Date | null; onChange?: (date: Date | null) => void; placeholderText?: string; minDate?: Date; maxDate?: Date; inputClassName?: string; field?: Field; } function buildDisabledMatcher(minDate?: Date, maxDate?: Date) { if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }]; if (minDate) return { before: minDate }; if (maxDate) return { after: maxDate }; return undefined; } const inputDateFormats = [ "yyyy-MM-dd", "MM/dd/yyyy", "M/d/yyyy", "MMM d, yyyy", "MMMM d, yyyy", ]; function parseDateInput(input: string, baseDate: Date) { const value = input.trim(); if (!value) return null; const base = startOfDay(baseDate); for (const formatString of inputDateFormats) { const parsed = parse(value, formatString, base); if (isValid(parsed)) { return startOfDay(parsed); } } const fallback = new Date(value); return isValid(fallback) ? startOfDay(fallback) : null; } function parseNaturalLanguageDate(input: string, baseDate: Date) { const value = input.trim().toLowerCase(); if (!value) return null; const base = startOfDay(baseDate); if (value === "today") return base; if (value === "tomorrow") return addDays(base, 1); if (value === "yesterday") return addDays(base, -1); const nextMatch = value.match(/^next\s+(week|month|year)$/); if (nextMatch) { switch (nextMatch[1]) { case "week": return addWeeks(base, 1); case "month": return addMonths(base, 1); case "year": return addYears(base, 1); default: break; } } const inMatch = value.match( /^(in\s+)?(\d+)\s+(day|days|week|weeks|month|months|year|years)$/, ); if (inMatch) { const amount = Number(inMatch[2]); const unit = inMatch[3]; if (!Number.isNaN(amount)) { switch (unit) { case "day": case "days": return addDays(base, amount); case "week": case "weeks": return addWeeks(base, amount); case "month": case "months": return addMonths(base, amount); case "year": case "years": return addYears(base, amount); default: break; } } } for (const formatString of inputDateFormats) { const parsed = parse(value, formatString, base); if (isValid(parsed)) { return startOfDay(parsed); } } const fallback = new Date(value); return isValid(fallback) ? startOfDay(fallback) : null; } function resolveFieldDate(field?: Field) { const value = field?.value; if (!value) return null; const parsed = new Date(value); return isValid(parsed) ? startOfDay(parsed) : null; } function DatePicker({ selected, onChange, placeholderText = "Pick a date", minDate, maxDate, showIcon, inputClassName, field, }: DatePickerProps) { const fieldDate = React.useMemo(() => resolveFieldDate(field), [field]); const resolvedSelected = selected ?? fieldDate; return ( onChange?.(date || null)} disabled={buildDisabledMatcher(minDate, maxDate)} captionLayout="dropdown" components={{ Dropdown: CustomDropdown }} /> ); } function DatePickerNaturalLanguage({ selected, onChange, placeholderText = 'Try "tomorrow"', minDate, maxDate, inputClassName, field, }: DatePickerNaturalLanguageProps) { const fieldDate = React.useMemo(() => resolveFieldDate(field), [field]); const initialDate = selected ?? fieldDate ?? null; const [open, setOpen] = React.useState(false); const [internalDate, setInternalDate] = React.useState( initialDate, ); const [inputValue, setInputValue] = React.useState(() => initialDate ? format(initialDate, "MMM d, yyyy") : "", ); React.useEffect(() => { if (selected !== undefined) { setInternalDate(selected); setInputValue(selected ? format(selected, "MMM d, yyyy") : ""); return; } if (fieldDate) { setInternalDate(fieldDate); setInputValue(format(fieldDate, "MMM d, yyyy")); } else if (fieldDate === null) { setInternalDate(null); setInputValue(""); } }, [fieldDate, selected]); const resolvedDate = selected ?? internalDate; const commitDate = React.useCallback( (date: Date | null) => { if (selected === undefined) { setInternalDate(date); } onChange?.(date); setInputValue(date ? format(date, "MMM d, yyyy") : ""); }, [onChange, selected], ); const commitInput = React.useCallback(() => { const trimmed = inputValue.trim(); if (!trimmed) { commitDate(null); return; } const parsed = parseNaturalLanguageDate(trimmed, new Date()); if (!parsed) return; if (minDate && parsed < minDate) return; if (maxDate && parsed > maxDate) return; commitDate(parsed); }, [commitDate, inputValue, minDate, maxDate]); return (

setInputValue(event.target.value)} onBlur={commitInput} onFocus={() => setOpen(true)} onKeyDown={(event) => { if (event.key === "Enter") { commitInput(); setOpen(false); } }} placeholder={placeholderText} className={cn("min-w-0", inputClassName)} aria-label="Date input" /> { commitDate(date || null); setOpen(false); }} disabled={buildDisabledMatcher(minDate, maxDate)} captionLayout="dropdown" components={{ Dropdown: CustomDropdown }} />

); } function DatePickerWithInput({ selected, onChange, placeholderText = "MM/DD/YYYY", minDate, maxDate, inputClassName, field, }: DatePickerWithInputProps) { const fieldDate = React.useMemo(() => resolveFieldDate(field), [field]); const initialDate = selected ?? fieldDate ?? null; const [open, setOpen] = React.useState(false); const [internalDate, setInternalDate] = React.useState( initialDate, ); const [inputValue, setInputValue] = React.useState(() => initialDate ? format(initialDate, "MM/dd/yyyy") : "", ); React.useEffect(() => { if (selected !== undefined) { setInternalDate(selected); setInputValue(selected ? format(selected, "MM/dd/yyyy") : ""); return; } if (fieldDate) { setInternalDate(fieldDate); setInputValue(format(fieldDate, "MM/dd/yyyy")); } else if (fieldDate === null) { setInternalDate(null); setInputValue(""); } }, [fieldDate, selected]); const resolvedDate = selected ?? internalDate; const commitDate = React.useCallback( (date: Date | null) => { if (selected === undefined) { setInternalDate(date); } onChange?.(date); setInputValue(date ? format(date, "MM/dd/yyyy") : ""); }, [onChange, selected], ); const commitInput = React.useCallback(() => { const trimmed = inputValue.trim(); if (!trimmed) { commitDate(null); return; } const parsed = parseDateInput(trimmed, new Date()); if (!parsed) return; if (minDate && parsed < minDate) return; if (maxDate && parsed > maxDate) return; commitDate(parsed); }, [commitDate, inputValue, minDate, maxDate]); return (

); } function DatePickerSimple() { const [date, setDate] = React.useState(); return ( ); } function DatePickerWithRange() { const [date, setDate] = React.useState({ from: new Date(new Date().getFullYear(), 0, 20), to: addDays(new Date(new Date().getFullYear(), 0, 20), 20), }); return ( ); } export { DatePicker, DatePickerNaturalLanguage, DatePickerSimple, DatePickerWithInput, DatePickerWithRange, };

Date Picker

Showcase

Date Picker