"use client"; import { format, isValid, parse } from "date-fns"; import { CalendarIcon } from "lucide-react"; import { useState } from "react"; import { Calendar } from "@/registry/default/ui/calendar"; import { Field, FieldLabel } from "@/registry/default/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/default/ui/input-group"; export default function Particle() { const [date, setDate] = useState(() => new Date()); const [month, setMonth] = useState(() => new Date()); const [inputValue, setInputValue] = useState(() => format(new Date(), "yyyy-MM-dd"), ); const handleDayPickerSelect = (selectedDate: Date | undefined) => { if (!selectedDate) { setInputValue(""); setDate(undefined); } else { setDate(selectedDate); setMonth(selectedDate); setInputValue(format(selectedDate, "yyyy-MM-dd")); } }; 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); } }; return (

Enter date

); }

Calendar 17

Instalação

Dependências

Registry dependencies