@usevyre/react @usevyre/vue

Date Range Picker

Select a start and end date in one control. Built on top of Calendar with a friendlier { from, to } object API, a two-month side-by-side view, and optional preset shortcuts. Reach for DatePicker when you only need a single date.

Basic

Pass a controlled { from, to } object as value and read the next range from onChange. Two months are shown by default; the popover closes automatically once both ends are picked.

— → —

 
import { useState } from "react";
import { DateRangePicker } from "@usevyre/react";
import type { DateRange } from "@usevyre/react";

const [range, setRange] = useState<DateRange>({ from: null, to: null });

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

With presets

Add the presets prop for a shortcut column — pass true for the built-in set (Today, Yesterday, Last 7 / 30 days, This month, Last month) or supply your own array of { label, range() } entries.

— → —

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

// or custom presets:
<DateRangePicker
  value={range}
  onChange={setRange}
  presets={[
    { label: "Q1", range: () => ({ from: new Date(2026, 0, 1), to: new Date(2026, 2, 31) }) },
  ]}
/>

Single month

Set numberOfMonths={1} for tight layouts or mobile — range highlighting still works across month navigation.

— → —

 
<DateRangePicker value={range} onChange={setRange} numberOfMonths={1} />

Props

Props

Prop Type Default Description
value { from: Date | null; to: Date | null } | null — Selected range (controlled). Pass an object — NOT a [Date, Date] tuple.
onChange (range: DateRange) => void — Called with { from, to } whenever the range changes.
placeholder string "Pick a date range" Trigger text shown when no range is selected.
numberOfMonths 1 | 2 2 How many month calendars to display side-by-side.
presets boolean | DateRangePreset[] false true shows built-in presets (Today, Yesterday, Last 7/30 days, This/Last month); or pass a custom { label, range() } array.
minDate Date — Earliest selectable date.
maxDate Date — Latest selectable date.
disabled (date: Date) => boolean — Return true to disable specific dates.
weekStartsOn 0 | 1 1 0 = Sunday, 1 = Monday.
className string — Additional CSS class on the wrapper.
← Data Grid Dropdown Menu →