"use client"; import { format, isValid, parse } from "date-fns"; import { CalendarIcon } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Calendar } from "@/registry/default/ui/calendar"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/default/ui/input-group"; import { Popover, PopoverPopup, PopoverTrigger, } from "@/registry/default/ui/popover"; export default function Particle() { const [date, setDate] = useState(); const [inputValue, setInputValue] = useState(""); const [month, setMonth] = useState(() => new Date()); const handleInputChange = (e: React.ChangeEvent) => { const value = e.target.value; setInputValue(value); if (value) { const parsedDate = parse(value, "yyyy-MM-dd", new Date()); if (isValid(parsedDate)) { setDate(parsedDate); setMonth(parsedDate); } } else { setDate(undefined); } }; const handleSelect = (selectedDate: Date | undefined) => { setDate(selectedDate); if (selectedDate) { setInputValue(format(selectedDate, "yyyy-MM-dd")); setMonth(selectedDate); } else { setInputValue(""); } }; return ( e.stopPropagation()} type="date" value={inputValue} /> } > ); }

Date Picker 5

Instalação

Dependências

Registry dependencies