Time away
Dates, without time zones
The end follows the start. Your device provides the calendar picker.
Date range picker
Collects start and end dates with two native date editors, shared constraints, and 44px controls.
Preview
In action
When to use
Use it for
- A start/end date range that should use the platform's date editor and calendar picker.
- Forms that submit ISO calendar dates without time-zone conversion.
Not for
- A single date; use DatePicker or Calendar.
- Time-of-day selection; use TimeField.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { DateRangePicker } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/date-range-picker.
2. Vendor the source
npx @noorddev/vlak-cli add date-range-picker
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/date-range-picker.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { DateRangePicker } from "@noorddev/vlak-react";
<DateRangePicker label="Stay" name="stay" defaultValue={{ start: "2026-09-08", end: "2026-09-12" }} min="2026-09-01" required />Props
DateRangePicker
Two native date editors share bounds; changing the start beyond the end clears the end.
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateRangeValue | ISO calendar dates, YYYY-MM-DD; no time zone conversion. | |
defaultValue | DateRangeValue | { start: "", end: "" } | |
onValueChange | (value: DateRangeValue) => void | ||
label | ReactNode | "Date range" | |
startLabel | string | "Start date" | |
endLabel | string | "End date" | |
min | string | ||
max | string | ||
required | boolean |
Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves through the two native date editors and their platform picker controls. |
| Arrow keys | Edits the active date segment according to the browser's native behavior. |
Accessibility
- Uses a fieldset/legend and a separately labeled native date input for each endpoint. The browser owns each date popup.
- Values use year-month-day strings, for example 2026-09-06. A new start after the old end clears the end; end's minimum follows the start.
- min, max, and required use native constraint validation. A supplied inverted controlled range is marked invalid.
- With name, form fields are name[start] and name[end]. The ref reaches the fieldset; uncontrolled values reset with the form.
Markup
<fieldset class="rs-date-range-picker"><legend class="rs-date-range-picker-legend">Stay</legend><div class="rs-date-range-picker-fields"><label>Start date<input class="rs-input rs-date-range-picker-input" type="date" name="stay[start]" value="2026-09-08" /></label><label>End date<input class="rs-input rs-date-range-picker-input" type="date" name="stay[end]" min="2026-09-08" value="2026-09-12" /></label></div></fieldset>
Classes
.rs-date-range-picker.rs-date-range-picker-legend.rs-date-range-picker-fields.rs-date-range-picker-input