@usevyre/react@usevyre/vue

Date Range Picker

Select a start and end date in one control. Built on top of Calendarwith 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.

Pick a date range

— → —

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} />

<script setup>
import { ref } from "vue";
import { DateRangePicker } from "@usevyre/vue";

const range = ref({ from: null, to: null });
</script>
<template>
  <DateRangePicker v-model="range" />
</template>

With presets

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

Pick a date range

— → —

<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) }) },
  ]}
/>

<DateRangePicker v-model="range" presets />

<DateRangePicker
  v-model="range"
  :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.

Pick a date range

— → —

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

<DateRangePicker v-model="range" :number-of-months="1" />

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.

AI Context

Valid props

Prop	Values	Default
`numberOfMonths`	`"1"`\|`"2"`	`2`
`weekStartsOn`	`"0"`\|`"1"`	`1`

Common AI mistakes

value={[from, to]}→ Use value={{ from, to }} and read range.from / range.to
DateRangePicker for a single date→ Use <DatePicker /> for a single date
presets="true" (string)→ Use the bare prop: presets (or presets={true})

Quick examples

Range picker with built-in presets

const [range, setRange] = useState({ from: null, to: null });
<DateRangePicker value={range} onChange={setRange} presets />

Single month, no presets

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

← Data Grid Dropdown Menu →