Components
Loading preview...
A date picker component with range and multi-select support.
npx shadcn@latest add https://21st.dev/r/coss.com/calendar"use client";
import { useState } from "react";
import { Calendar } from "@/components/ui/calendar";
export default function CalendarDropdown() {
const [date, setDate] = useState<Date | undefined>(new Date());
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<Calendar
mode="single"
selected={date}
onSelect={setDate}
captionLayout="dropdown"
startMonth={new Date(2020, 0)}
endMonth={new Date(2030, 11)}
/>
</div>
);
}