Date Range Picker

Forms

About

A button-triggered popover calendar for picking a start and end date range, with live hover preview while selecting.

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 * as React from "react";
import { DateRangePicker } from "@/components/ui/date-range-picker";
import type { DateRange } from "react-day-picker";

type RangeState = DateRange | undefined;

export default function DateRangePickerDemo() {
  const [range, setRange] = React.useState<RangeState>(undefined);

  return (
    <div className="flex w-full items-center justify-center min-h-[420px] p-8">
      <DateRangePicker value={range} onSelect={setRange} />
    </div>
  );
}