Data feedback

DateRangePicker

DatePicker popup for selecting start and end date ranges.

5 examplesInteractive ComponentReact 19 & Next.js 16Tailwind CSS v4

Install

pnpm add @quinkit/ui react-day-picker

Import

import { DateRangePicker } from "@quinkit/ui";

Required packages

Powers Calendar and DateRangePicker. Add these packages before using this component:

@quinkit/ui
react-day-picker

Install command is shown above. Without the peer package, imports will fail at build time.

Interactive Examples

Live previews · code · themes · viewport · dark mode

Basic Date Range Picker

Pop-up calendar for picking start and end dates.

Quick Presets Bar

Preset shortcuts alongside calendar range selector.

Form Field Integration

Date range picker integrated within a standard form.

Disabled State

Non-interactive date range picker.

Historical Audit Range (Read-Only)

Reporting Window Selector

Analytics report export date range container.

Analytics Export Window

Overview

DateRangePicker is a popover-anchored date range selector composed from Popover and Calendar. It provides a clean trigger button displaying formatted date ranges, a clear button action, and a dual-month calendar grid.

Installation

bash

pnpm add @quinkit/ui react-day-picker

react-day-picker is a required peer dependency for DateRangePicker (and Calendar).

Usage Examples

### Basic Usage

tsx

import { useState } from "react";
import { DateRangePicker, type DateRange } from "@quinkit/ui";

export function DateRangePickerDemo() {
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(),
    to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  });

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

Props

Prop	Type	Default	Description
`value`	`DateRange`	`undefined`	Selected start (`from`) and end (`to`) dates.
`onChange`	`(range: DateRange \| undefined) => void`	`undefined`	Callback fired when range changes.
`placeholder`	`string`	`"Pick a date range"`	Trigger text when no range is selected.
`className`	`string`	`undefined`	Additional class names for container.

Accessibility Details

Popover trigger communicates aria-expanded and aria-haspopup.
Clear button contains an explicit aria-label.
Escape key closes popover without mutating value.

Accessibility & Keyboard

DateRangePicker adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

Tab / Shift + Tab — Focuses control and moves between interactive elements.
Space / Enter — Triggers action or toggles selection.
Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

Built with semantic HTML tags and explicit aria-* attributes.
Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry

npx shadcn@latest add https://quinkit-ui.vercel.app/r/date-range-picker.json