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 [date3, setDate3] = useState<RangeValue | null>(null);
return (
<div className="self-start pt-30">
<Calendar isDocsPage onChange={setDate3} presets={presets} value={date3} />
</div>
);
}