A popover date range picker with a quick-preset side panel. Pick a range in two clicks on the two-month calendar — the range previews live as you hover, and the value is only committed to onChange once the range is complete, so a half-finished selection never leaks out. Presets (Today, Last 7 days, This month, …) fill the range in a single click, minDate / maxDate clamp both the calendar and the presets, and the trigger clears back to empty. Works controlled (value) or uncontrolled (defaultValue); the preset list and date-fns locale are configurable.

Installation

{
  "registries": {
    "@ikui": "https://ik-ui.pages.dev/r/{name}.json"
  }
}

pnpm dlx shadcn@latest add @ikui/date-range-picker

Usage

import { DateRangePicker } from "@/components/date-range-picker";

import { useState } from "react";
import type { DateRange } from "react-day-picker";

const [range, setRange] = useState<DateRange>();

<DateRangePicker value={range} onChange={setRange} />;

Examples

Custom presets

Pass a presets array of { label, range }. range is either a fixed DateRange or a factory evaluated on click (use a factory when it must be relative to "now").

Bounded range

minDate and maxDate disable out-of-range days and clamp any preset or picked range to the window.

Without presets

Pass presets={[]} to drop the side panel and show just the calendar.

Props

DateRangePreset