Date range picker

When to use #

Use it for

Reports, stays and filters spanning a period.
You want shortcuts like Last 7 days.

Skip it when

A single date is enough; use a date picker.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/date-range-picker.json

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { DateRangePicker, type DateRange } from "@/components/ui/date-range-picker"

export function StayRange() {
  const [range, setRange] = useState<DateRange>({ start: null, end: null });
  return (
    <div className="w-full max-w-sm">
      <DateRangePicker label="Stay" value={range} onValueChange={setRange} />
    </div>
  );
}

API reference #

DateRangePicker

component

PropTypeDefault

label *string—

valueDateRange—

defaultValueDateRange{ start: null, end: null }

onValueChange((value: DateRange) => void)—

presetsreadonly DateRangePreset[]—

namestring—

disabledboolean—

classNamestring—

It exposes status semantics, with aria-haspopup, aria-expanded, aria-hidden and aria-label kept in step with state. Changes that matter are announced through a live region.

Keyboard and focus handling comes from Radix popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.