Components
Loading preview...
Displays a calendar from which users can select a date or range of dates.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/calendarimport { useState } from "react";
import { Calendar, RangeValue } from "@/components/ui/calendar";
import { addDays, subDays } from "date-fns";
export default function MinAndMaxDatesDemo() {
const [date7, setDate7] = useState<RangeValue | null>(null);
const minValue = subDays(new Date().setHours(5), 1); // 2 days ago
const maxValue = addDays(new Date(), 1); // 2 days from now
return (
<div className="self-start pt-30">
<Calendar
isDocsPage
maxValue={maxValue}
minValue={minValue}
onChange={setDate7}
value={date7}
/>
</div>
);
}