diff --git a/src/components/admin/editors/FormerNamesEditor.tsx b/src/components/admin/editors/FormerNamesEditor.tsx index 140347bf..f472a4cb 100644 --- a/src/components/admin/editors/FormerNamesEditor.tsx +++ b/src/components/admin/editors/FormerNamesEditor.tsx @@ -94,14 +94,10 @@ export function FormerNamesEditor({ names, onChange, currentName }: FormerNamesE
- updateName(actualIndex, 'date_changed', date || undefined)} - placeholder="Select or type date" - allowTextEntry={true} - fromYear={1800} - toYear={new Date().getFullYear()} - /> + updateName(actualIndex, 'date_changed', date || undefined)} + />
diff --git a/src/components/reviews/ReviewForm.tsx b/src/components/reviews/ReviewForm.tsx index 42759b62..c89592e5 100644 --- a/src/components/reviews/ReviewForm.tsx +++ b/src/components/reviews/ReviewForm.tsx @@ -180,15 +180,13 @@ export function ReviewForm({ {/* Visit Date */}
- setValue('visit_date', date ? date.toISOString().split('T')[0] : undefined)} - placeholder="When did you visit?" - disableFuture={true} - fromYear={1950} - allowTextEntry={true} - dateFormat="yyyy-MM-dd" - /> + setValue('visit_date', date ? date.toISOString().split('T')[0] : undefined)} + placeholder="When did you visit?" + disableFuture={true} + fromYear={1950} + />

Select the date of your visit to help others understand when this experience occurred.

diff --git a/src/components/ui/calendar-custom-caption.tsx b/src/components/ui/calendar-custom-caption.tsx deleted file mode 100644 index f5ff1d2d..00000000 --- a/src/components/ui/calendar-custom-caption.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from "react"; -import { CaptionProps, useNavigation } from "react-day-picker"; -import { ChevronLeft, ChevronRight } from "lucide-react"; -import { Button } from "@/components/ui/button"; -import { YearGridSelector } from "@/components/ui/year-grid-selector"; -import { cn } from "@/lib/utils"; - -interface CustomCaptionProps extends CaptionProps { - fromYear?: number; - toYear?: number; -} - -export function CustomCalendarCaption({ - displayMonth, - fromYear = 1800, - toYear = new Date().getFullYear() + 10, -}: CustomCaptionProps) { - const { goToMonth, nextMonth, previousMonth, currentMonth } = useNavigation(); - - const handleYearSelect = (year: number) => { - const newDate = new Date(displayMonth); - newDate.setFullYear(year); - goToMonth(newDate); - }; - - const monthName = displayMonth.toLocaleString("en-US", { month: "long" }); - const selectedYear = displayMonth.getFullYear(); - - return ( -
- - -
- {monthName} - - - -
- - -
- ); -} diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 236ff114..900a69e4 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -4,20 +4,13 @@ import { DayPicker } from "react-day-picker"; import { cn } from "@/lib/utils"; import { buttonVariants } from "@/components/ui/button"; -import { CustomCalendarCaption } from "@/components/ui/calendar-custom-caption"; -export type CalendarProps = React.ComponentProps & { - enableYearGrid?: boolean; -}; +export type CalendarProps = React.ComponentProps; -function Calendar({ className, classNames, showOutsideDays = true, enableYearGrid = false, ...props }: CalendarProps) { - const captionLayout = enableYearGrid ? undefined : (props.captionLayout || "dropdown-buttons"); +function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( ( - - ) - : undefined, IconLeft: ({ ..._props }) => , IconRight: ({ ..._props }) => , }} diff --git a/src/components/ui/date-input-with-feedback.tsx b/src/components/ui/date-input-with-feedback.tsx deleted file mode 100644 index 3884830a..00000000 --- a/src/components/ui/date-input-with-feedback.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from "react"; -import { format, parse, isValid } from "date-fns"; -import { cn } from "@/lib/utils"; -import { DatePicker, DatePickerProps } from "./date-picker"; - -interface DateInputWithFeedbackProps extends DatePickerProps { - showFeedback?: boolean; -} - -export function DateInputWithFeedback({ - showFeedback = true, - onSelect, - ...props -}: DateInputWithFeedbackProps) { - const [parseStatus, setParseStatus] = React.useState<{ - isValid: boolean; - message: string; - parsed?: Date; - }>({ isValid: true, message: "" }); - - const parseDate = (input: string): Date | null => { - if (!input) return null; - - // Try ISO format: 2005-06-15 - let parsed = parse(input, "yyyy-MM-dd", new Date()); - if (isValid(parsed)) return parsed; - - // Try US format: 06/15/2005 - parsed = parse(input, "MM/dd/yyyy", new Date()); - if (isValid(parsed)) return parsed; - - // Try European format: 15/06/2005 - parsed = parse(input, "dd/MM/yyyy", new Date()); - if (isValid(parsed)) return parsed; - - // Try short format: 6/15/05 - parsed = parse(input, "M/d/yy", new Date()); - if (isValid(parsed)) return parsed; - - // Try short year format: 2005-6-15 - parsed = parse(input, "yyyy-M-d", new Date()); - if (isValid(parsed)) return parsed; - - return null; - }; - - const handleSelect = (date: Date | undefined) => { - if (date) { - setParseStatus({ - isValid: true, - message: `✓ ${format(date, "PPP")}`, - parsed: date - }); - } else { - setParseStatus({ isValid: true, message: "" }); - } - onSelect?.(date); - }; - - return ( -
- - {showFeedback && parseStatus.message && ( -

- {parseStatus.message} -

- )} -
- ); -} diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx index 41438195..f2a267c5 100644 --- a/src/components/ui/date-picker.tsx +++ b/src/components/ui/date-picker.tsx @@ -1,10 +1,9 @@ import * as React from "react"; -import { format, parse, isValid } from "date-fns"; +import { format } from "date-fns"; import { CalendarIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; import { Calendar } from "@/components/ui/calendar"; import { Popover, @@ -22,9 +21,6 @@ export interface DatePickerProps { disablePast?: boolean; fromYear?: number; toYear?: number; - allowTextEntry?: boolean; - dateFormat?: string; - enableYearGrid?: boolean; } export function DatePicker({ @@ -37,66 +33,12 @@ export function DatePicker({ disablePast = false, fromYear, toYear, - allowTextEntry = false, - dateFormat = "yyyy-MM-dd", - enableYearGrid = false, }: DatePickerProps) { const [open, setOpen] = React.useState(false); - const [textInput, setTextInput] = React.useState(""); - const [isTyping, setIsTyping] = React.useState(false); - - const parseDate = (input: string): Date | null => { - if (!input) return null; - - // Try ISO format: 2005-06-15 - let parsed = parse(input, "yyyy-MM-dd", new Date()); - if (isValid(parsed)) return parsed; - - // Try US format: 06/15/2005 - parsed = parse(input, "MM/dd/yyyy", new Date()); - if (isValid(parsed)) return parsed; - - // Try European format: 15/06/2005 - parsed = parse(input, "dd/MM/yyyy", new Date()); - if (isValid(parsed)) return parsed; - - // Try short format: 6/15/05 - parsed = parse(input, "M/d/yy", new Date()); - if (isValid(parsed)) return parsed; - - // Try short year format: 2005-6-15 - parsed = parse(input, "yyyy-M-d", new Date()); - if (isValid(parsed)) return parsed; - - return null; - }; - - const handleTextChange = (e: React.ChangeEvent) => { - const value = e.target.value; - setTextInput(value); - setIsTyping(true); - - const parsed = parseDate(value); - if (parsed) { - onSelect?.(parsed); - } - }; - - const handleBlur = () => { - setIsTyping(false); - if (date) { - setTextInput(format(date, dateFormat)); - } else { - setTextInput(""); - } - }; const handleSelect = (selectedDate: Date | undefined) => { onSelect?.(selectedDate); setOpen(false); - if (selectedDate) { - setTextInput(format(selectedDate, dateFormat)); - } }; const getDisabledDates = (date: Date) => { @@ -106,49 +48,6 @@ export function DatePicker({ return false; }; - if (allowTextEntry) { - return ( -
- setIsTyping(true)} - onBlur={handleBlur} - placeholder={placeholder} - disabled={disabled} - className={cn("flex-1", className)} - /> - - - - - - - - -
- ); - } - return ( @@ -160,7 +59,6 @@ export function DatePicker({ className )} disabled={disabled} - type="button" > @@ -178,7 +76,6 @@ export function DatePicker({ className="p-3 pointer-events-auto" fromYear={fromYear} toYear={toYear} - enableYearGrid={enableYearGrid} /> diff --git a/src/components/ui/flexible-date-input.tsx b/src/components/ui/flexible-date-input.tsx index 7d82b1f7..fd1c8e4d 100644 --- a/src/components/ui/flexible-date-input.tsx +++ b/src/components/ui/flexible-date-input.tsx @@ -128,7 +128,6 @@ export function FlexibleDateInput({ disablePast={disablePast} fromYear={fromYear} toYear={toYear} - allowTextEntry={true} /> )} diff --git a/src/components/ui/year-grid-selector.tsx b/src/components/ui/year-grid-selector.tsx deleted file mode 100644 index 5f85ecfb..00000000 --- a/src/components/ui/year-grid-selector.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import * as React from "react"; -import { ChevronLeft, ChevronRight } from "lucide-react"; -import { cn } from "@/lib/utils"; -import { Button } from "@/components/ui/button"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; - -interface YearGridSelectorProps { - selectedYear: number; - onYearSelect: (year: number) => void; - fromYear?: number; - toYear?: number; - children: React.ReactNode; -} - -export function YearGridSelector({ - selectedYear, - onYearSelect, - fromYear = 1800, - toYear = new Date().getFullYear() + 10, - children, -}: YearGridSelectorProps) { - const [open, setOpen] = React.useState(false); - const [view, setView] = React.useState<"year" | "decade">("year"); - const [startYear, setStartYear] = React.useState(() => { - // Start from the decade containing the selected year - return Math.floor(selectedYear / 10) * 10; - }); - - const handleYearSelect = (year: number) => { - onYearSelect(year); - setOpen(false); - }; - - const handleDecadeSelect = (decade: number) => { - setStartYear(decade); - setView("year"); - }; - - const navigateYears = (direction: "prev" | "next") => { - setStartYear((prev) => prev + (direction === "next" ? 12 : -12)); - }; - - const navigateDecades = (direction: "prev" | "next") => { - setStartYear((prev) => prev + (direction === "next" ? 120 : -120)); - }; - - const renderYearGrid = () => { - const years: number[] = []; - for (let i = 0; i < 12; i++) { - const year = startYear + i; - if (year >= fromYear && year <= toYear) { - years.push(year); - } - } - - const endYear = startYear + 11; - const currentYear = new Date().getFullYear(); - - return ( -
-
- - - -
-
- {years.map((year) => ( - - ))} -
-
- ); - }; - - const renderDecadeGrid = () => { - const decades: number[] = []; - const decadeStart = Math.floor(startYear / 100) * 100; - for (let i = 0; i < 12; i++) { - const decade = decadeStart + i * 10; - if (decade >= Math.floor(fromYear / 10) * 10 && decade <= Math.ceil(toYear / 10) * 10) { - decades.push(decade); - } - } - - const decadeEnd = decadeStart + 110; - - return ( -
-
- - - -
-
- {decades.map((decade) => ( - - ))} -
-
- ); - }; - - return ( - - {children} - - {view === "year" ? renderYearGrid() : renderDecadeGrid()} - - - ); -}