'use client'; import { useState } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react'; function getDaysInMonth(year: number, month: number) { return new Date(year, month + 1, 0).getDate(); } function getFirstDayOfMonth(year: number, month: number) { return new Date(year, month, 1).getDay(); } export default function DatePicker() { const today = new Date(); const [open, setOpen] = useState(false); const [current, setCurrent] = useState(new Date()); const [selected, setSelected] = useState(today); const year = current.getFullYear(); const month = current.getMonth(); const days = getDaysInMonth(year, month); const startDay = getFirstDayOfMonth(year, month); const handleSelect = (day: number) => { const date = new Date(year, month, day); setSelected(date); setOpen(false); }; const prevMonth = () => setCurrent(new Date(year, month - 1, 1)); const nextMonth = () => setCurrent(new Date(year, month + 1, 1)); return (

{open && (

{current.toLocaleString('default', { month: 'long', year: 'numeric', })}

{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d) => (

{d}

))}

{Array.from({ length: startDay }).map((_, i) => (

))} {Array.from({ length: days }).map((_, i) => { const day = i + 1; const isActive = selected && selected.getDate() === day && selected.getMonth() === month && selected.getFullYear() === year; return ( handleSelect(day)} > {day} ); })}

)}

); }

Date Picker

Installation

Usage