"use client"; import * as React from "react"; import { Calendar } from "@/components/ui/calendar"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; export default function Calendar5() { const [date, setDate] = React.useState<Date | undefined>(new Date()); const [month, setMonth] = React.useState<number>(date?.getMonth() || 0); const [year, setYear] = React.useState<number>(date?.getFullYear() || 2025); const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; const years = Array.from({ length: 10 }, (_, i) => 2020 + i); const handleMonthChange = (value: string) => { const newMonth = months.indexOf(value); setMonth(newMonth); setDate(new Date(year, newMonth, 1)); }; const handleYearChange = (value: string) => { const newYear = Number.parseInt(value); setYear(newYear); setDate(new Date(newYear, month, 1)); }; return ( <div className="space-y-2"> <Calendar mode="single" selected={date} onSelect={setDate} month={new Date(year, month)} onMonthChange={(date) => { setMonth(date.getMonth()); setYear(date.getFullYear()); }} className="rounded-md border" hideHead={false} captionLayout="buttons" fromMonth={new Date(2020, 0)} toMonth={new Date(2029, 11)} /> <div className="flex space-x-2"> <Select value={months[month]} onValueChange={handleMonthChange}> <SelectTrigger className="w-full"> <SelectValue placeholder="Month" /> </SelectTrigger> <SelectContent> {months.map((month) => ( <SelectItem key={month} value={month}> {month} </SelectItem> ))} </SelectContent> </Select> <Select value={year.toString()} onValueChange={handleYearChange}> <SelectTrigger className="w-full"> <SelectValue placeholder="Year" /> </SelectTrigger> <SelectContent> {years.map((year) => ( <SelectItem key={year} value={year.toString()}> {year} </SelectItem> ))} </SelectContent> </Select> </div> </div> ); }