GitHub

Go to...

Choose a page to open.

Preset range buttons and a calendar popover for a custom date and time range.

Date Range Picker

date-range-picker-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/date-range-picker.json

Usage

import {
  DateRangePicker,
  type DateRangeValue,
} from "@/components/date-range-picker";
const [value, setValue] = useState<DateRangeValue>({
  type: "preset",
  preset: "7d",
});

<DateRangePicker value={value} onChange={setValue} />

The value is a preset or a custom range.

type DateRangeValue =
  | { type: "preset"; preset: "24h" | "7d" | "30d" }
  | { type: "custom"; from: Date; to: Date };

The component is controlled. It calls onChange when the user selects a preset or applies a custom range. A custom range must end in the past and span at most 366 days.