Forms
Date range picker
Picks a start and end date from two months side by side, with quick presets and Cancel / Apply buttons.
- Source
- src/components/ui/date-range-picker.tsx
- Figma
- DateRangePicker · state (closed, open).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { DateRangePicker, type DateRange } from "@/components/ui/date-range-picker";When to use
- Filtering dashboards, reports and tables by a period.
- Booking or scheduling flows that need both a start and an end date.
- For a single date, use the Date picker.
- When people only ever pick a fixed set of periods, a Select with those options is simpler.
Examples
Placeholder and width
Uncontrolled, with a custom placeholder and a narrower trigger.
In a report header
Filter a card's data by period. The description reflects the applied range.
API reference
DateRangePicker
Trigger button plus a Radix Popover with presets, two month grids and Cancel / Apply. The first click sets the start, the second sets the end; picking an earlier end swaps them. Nothing is committed until Apply. The second month is hidden below the md breakpoint.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | DateRange | - | The applied range (controlled). When omitted, the picker keeps its own state. |
| onChange | (range: DateRange) => void | - | Called when Apply is clicked. If only a start date was picked, from and to are the same day. |
| placeholder | string | "Pick a date range" | Shown in the trigger when no range is applied. |
| className | string | - | Classes for the trigger button. It is 288px wide (w-72) by default. |
DateRange
Exported type for value and onChange.
| Prop | Type | Default | Description |
|---|---|---|---|
| from | Date | - | First day of the range, inclusive. |
| to | Date | - | Last day of the range, inclusive. |
Accessibility
- The popover is Radix Popover: focus moves inside when it opens, Escape or an outside click closes it without applying, and focus returns to the trigger.
- Presets, days, Cancel and Apply are all native buttons reachable with Tab.
- The footer spells out the draft range and day count, or prompts "Pick a start date" and "Pick an end date", so the current step is always written out.
- Days announce only their number and there is no arrow-key grid navigation; the presets are the fastest keyboard path.
- The trigger has no id or aria-label prop, so put a visible label next to it.