A composable calendar component for selecting a start and end date, with month/year quick-pick, presets, keyboard navigation and an animated dropdown trigger.
"use client";
import {
DateRangePicker,
DateRangePickerCalendar,
DateRangePickerClear,
DateRangePickerContent,
DateRangePickerFooter,
DateRangePickerGrid,
DateRangePickerHeader,
DateRangePickerSelection,
DateRangePickerTrigger,
} from "@/components/ui/date-range-picker";
function isoDaysAgo(daysAgo: number) {
const day = new Date();
day.setDate(day.getDate() - daysAgo);
return `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, "0")}-${String(day.getDate()).padStart(2, "0")}`;
}
export default function DateRangePickerDemo() {
const today = isoDaysAgo(0);
const weekStart = isoDaysAgo(6);
return (
<div className="flex min-h-[24rem] w-full items-center justify-center p-10">
<DateRangePicker
label="Reporting period"
defaultMonth={today}
defaultValue={{ from: weekStart, to: today }}
max={today}
>
<DateRangePickerTrigger />
<DateRangePickerContent>
<DateRangePickerCalendar className="w-full rounded-none border-0">
<DateRangePickerHeader />
<DateRangePickerGrid />
<DateRangePickerFooter>
<div className="flex items-center justify-between gap-2">
<DateRangePickerSelection />
<DateRangePickerClear />
</div>
</DateRangePickerFooter>
</DateRangePickerCalendar>
</DateRangePickerContent>
</DateRangePicker>
</div>
);
}