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 { endOfDay, startOfDay, subDays, subMonths, subWeeks } from "date-fns";
const presets = {
"last-3-days": {
text: "Last 3 Days",
start: startOfDay(subDays(new Date(), 3)),
end: endOfDay(new Date())
},
"last-7-days": {
text: "Last 7 Days",
start: startOfDay(subWeeks(new Date(), 1)),
end: endOfDay(new Date())
},
"last-14-days": {
text: "Last 14 Days",
start: startOfDay(subWeeks(new Date(), 2)),
end: endOfDay(new Date())
},
"last-month": {
text: "Last Month",
start: startOfDay(subMonths(new Date(), 1)),
end: endOfDay(new Date())
}
};
export default function PresetsDemo() {
const [date4, setDate4] = useState<RangeValue | null>(null);
return (
<div className="self-start pt-30">
<Calendar
compact
isDocsPage
onChange={setDate4}
presets={presets}
value={date4}
/>
</div>
);
}