Date range picker

InstallationCopy Anchor Link

npx shadcn@latest add @quireui-pro/date-range-picker

UsageCopy Anchor Link

const [period, setPeriod] = useState<DateRangeValue | null>(null);

<DateRangePicker aria-label="Report period" value={period} onValueChange={setPeriod} />

The value is { from, to } as plain dates, like { from: "2026-10-01", to: "2026-10-31" }, counting both ends. No time and no timezone, so a range never moves by a day between the browser, the server and the database.

TypingCopy Anchor Link

A range is often quicker to type than to click. While you type, the field shows what it read and how long it is, "→ Oct 1 – 20 · 20 days"; Enter takes it, Esc puts back what was there.

PickingCopy Anchor Link

The calendar opens from the button or with the down arrow. Pick the first day, then point at or arrow to the last: the range previews as you go and the footer says how long it is. The second pick takes it. Two months show side by side where there is room, one on a phone.

Presets sit beside the months and take a range in one click; the one that matches the value is checked. Pass presets to choose your own: phrases the field understands work as they are, anything else takes a label and a function of today.

<DateRangePicker
  presets={[
    "Last 7 days",
    "This quarter",
    { label: "Since launch", range: (today) => ({ from: "2026-03-01", to: today }) },
  ]}
/>

Rolling rangesCopy Anchor Link

A saved "Last 7 days" should still mean the last 7 days tomorrow. With rolling, a preset or a typed phrase that moves with the calendar stays in the value as preset, and the field shows the phrase with its days beside it. Typed dates and named periods like "q3" stay fixed.

<DateRangePicker rolling value={view.period} onValueChange={savePeriod} />
// { from: "2026-10-23", to: "2026-10-29", preset: "Last 7 days" }

Wherever the dates are read, like a server loading a saved report, resolveRange moves a rolling range to the days it covers today. It is not a client function, so it runs on the server too.

import { resolveRange } from "@/components/ui/date-range";

const { from, to } = resolveRange(view.period, today);

ComparingCopy Anchor Link

compare adds "Compare with" under the presets: the previous period, the same number of days just before (whole months compare with whole months, so March with February), or the previous year. The choice is kept in the value as compare. The compared days get a line under them in the calendar, and the footer names them.

comparedRange(value) gives the compared days, for the query that loads them. With name, they go with the form as {name}CompareFrom and {name}CompareTo.

ApplyCopy Anchor Link

By default a choice takes effect at once: the second day, a preset, a comparison. Half a range is never sent, since the first pick only waits for the second. Where every change loads something heavy, apply holds what you pick until Apply is pressed; Cancel, Esc or clicking away keep the range that was there.

Limits and bookingsCopy Anchor Link

min and max bound the days, and isDateDisabled rules out others. minDays and maxDays bound the length, counting both ends. For bookings, spanDisabled={false} stops a range from running across a disabled day. Once the first day is picked, every day that could not end the range fades.

<DateRangePicker presets={[]} minDays={3} maxDays={15} spanDisabled={false} isDateDisabled={isBooked} />

The panel on its ownCopy Anchor Link

DateRangePanel is the inside of the picker (the presets, the months and the footer) for a popover of your own. With typing it gets a field to type into on top. The Data table's date filter is built this way.

<PopoverContent size="auto" className="p-0">
  <DateRangePanel typing rolling value={range} onValueChange={setRange} onDone={() => setOpen(false)} />
</PopoverContent>

Other languagesCopy Anchor Link

locale formats the dates and the calendar, picks the first day of the week, and decides what 3/10 means. labels translates its own words. Typed phrases like "last 7 days" are read in English.

FormsCopy Anchor Link

With name, the range travels with its form as {name}From and {name}To in YYYY-MM-DD, through hidden inputs, so it works with plain form posts and server actions. A rolling range sends the days it covers today.

AccessibilityCopy Anchor Link

The field is a text input with a name from aria-label or a linked label, and what it read is announced politely as you type. Each month is a grid of buttons named in full, "Friday, October 23, 2026", with the days in the range marked as selected. The presets and the comparison are groups that Tab reaches once; the arrow keys move inside them. The footer announces the first day, then the range and its length.

MotionCopy Anchor Link

The calendar opens with the library's popover motion. Months turned with the arrows slide in from that side in 160ms; turned with the keys, they change instantly, and with reduced motion they only fade. The range follows the pointer exactly, with no easing, so it never lags behind where you point.

Date range picker or something else?Copy Anchor Link

• One date: the free Date picker.
• A month or a year on its own: a select is quicker than a calendar.

API referenceCopy Anchor Link