Date Range Picker

Date range selection. Free, MIT · Forms and input › Date and time

Installation

npx valyro-cli@latest add date-range-picker

npx shadcn@latest add https://valyro.xyz/r/date-range-picker.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { DateRangePicker } from 'valyro-ui';

Props

Prop	Type	Default
`value`	`DateRange`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`DateRange`	`EMPTY`	Initial `value` when uncontrolled.
`onValueChange`	`(value: DateRange) => void`		Called with the new `value` when it changes.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`placeholder`	`string`	`'Pick a date range'`	Text shown in the trigger (and the confirm footer) while no range is picked.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`		First day of the week in the calendar grids: 0 = Sunday, 1 = Monday (when omitted).
`minDate`	`Date`		Earliest selectable day (time of day ignored); earlier days and presets starting before it are disabled.
`maxDate`	`Date`		Latest selectable day (time of day ignored); later days and presets ending after it are disabled.
`isDateDisabled`	`(date: Date) => boolean`		Return true to disable a day, e.g. weekends or booked dates. Presets ignore it.
`presets`	`DateRangePreset[]`		Shortcuts in the sidebar. Defaults to common ranges ending today; pass `[]` to hide.
`confirm`	`boolean`	`false`	Keep the selection as a draft until Apply; Cancel discards it.
`size`	`'sm' \| 'md' \| 'lg'`		Trigger height and text size.
`invalid`	`boolean`		Danger border on the trigger. Also shown after a submit attempt while a required range is missing.
`name`	`string`		Submits `name[start]` and `name[end]` as `YYYY-MM-DD` (empty when unset).
`required`	`boolean`		Blocks native form submission while no range is picked.
`inline`	`boolean`	`false`	Keeps the panel (presets, calendar, Apply / Cancel) open in the page flow under the field instead of in a popover, e.g. in a report sidebar. `open`, `defaultOpen` and `onOpenChange` do not apply, and the panel never takes focus by itself: the field moves focus into it on click or ArrowDown.
`labels`	`Partial<DateRangePickerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Date Picker — Date selection
Date Field — Date typed segment by segment in the locale order
Time Picker — Time selection
Time Field — Time typed segment by segment, 24-hour or AM/PM
Wheel Picker — iOS-style picker wheel: momentum, 3D cylinder, date and time presets
Date Of Birth Input — Date of birth as three selects in locale order
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list

Previous: Date Picker · Next: Date Field · All Forms and input