"use client" import * as React from "react" import { Popover } from "radix-ui" import { cn } from "@/lib/utils" import { CalendarIcon } from "lucide-react" import { Calendar, type CalendarProps } from "./calendar" export interface DatePickerProps { selected?: CalendarProps["selected"] onSelect?: CalendarProps["onSelect"] mode?: CalendarProps["mode"] placeholder?: string className?: string } function DatePicker({ selected, onSelect, mode, placeholder = "Pick a date", className, }: DatePickerProps) { const [open, setOpen] = React.useState(false) const [month, setMonth] = React.useState(() => { if (selected instanceof Date) return selected if (Array.isArray(selected) && selected[0]) return selected[0] return new Date() }) const formatDate = (date: Date | [Date, Date] | undefined): string => { if (!date) return placeholder if (date instanceof Date) { return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }) } const [start, end] = date if (start && end) { return `${start.toLocaleDateString("en-US", { month: "short", day: "numeric" })} - ${end.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}` } if (start) { return start.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }) } return placeholder } return ( { onSelect?.(date) if (mode !== "range") { setOpen(false) } }} month={month} onMonthChange={setMonth} /> ) } DatePicker.displayName = "DatePicker" export { DatePicker }