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 type { DateRange } from "react-day-picker";
import { Calendar } from "@/components/ui/calendar";
export default function CalendarRange() {
const today = new Date();
const [range, setRange] = useState<DateRange | undefined>({
from: today,
to: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 6),
});
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<Calendar
mode="range"
selected={range}
onSelect={setRange}
/>
</div>
);
}