Date Range Picker

Component 3

About

A composable calendar component for selecting a start and end date, with month/year quick-pick, presets, keyboard navigation and an animated dropdown trigger.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Date Range Picker to your project and fits it to your theme.

Code

How Date Range Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}