DateRangePicker

A paired-field date range control built on DateField.

Dates of stay

Pick both dates to see the length of the stay.

View code

let checkIn = "";
let checkOut = "";

// The fields own their values; the island only reads them back, so nothing it
// renders can overwrite a date the reader picked.
function readFields(event: Event) {
	let field = event.target as HTMLInputElement;
	if (field.name === "checkIn") checkIn = field.value;
	else if (field.name === "checkOut") checkOut = field.value;
	else return;
	void handle.update();
}

<DateRangePicker mix={[on<HTMLDivElement, "change">("change", readFields)]}>
	<Label htmlFor="checkIn">Dates of stay</Label>
	<DateRangePicker.Group>
		<Input id="checkIn" type="date" name="checkIn" aria-label="Check in" />
		<Input id="checkOut" type="date" name="checkOut" aria-label="Check out" />
	</DateRangePicker.Group>
	<Description>
		{stayLengthHint(parseDayValue(checkIn), parseDayValue(checkOut))}
	</Description>
</DateRangePicker>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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

Renders DateRangePicker's root. Leaving children unset renders two independent DateField instances side by side under a native role="group", each aligned to its own start edge so a validation message under one never shifts the other's label; composing DateRangePicker.Group as children instead joins the two fields into one row and leaves every field prop above unread.

Examples

<DateRangePicker>
	<Label htmlFor="tripStart">{t("form.trip.label")}</Label>
	<DateRangePicker.Group>
		<Input id="tripStart" type="date" name="tripStart" aria-label={t("form.trip.start")} />
		<Input id="tripEnd" type="date" name="tripEnd" aria-label={t("form.trip.end")} />
	</DateRangePicker.Group>
</DateRangePicker>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`color?`	`Color`	Semantic color role for the fallback pair's focus rings. Read only when `children` is unset.
`startLabel?`	`RemixNode`	The start-date field's caption, rendered through DateField. Read only when `children` is unset.
`endLabel?`	`RemixNode`	The end-date field's caption, rendered through DateField. Read only when `children` is unset.
`startDescription?`	`RemixNode`	Supporting copy beneath the start-date field. Read only when `children` is unset.
`endDescription?`	`RemixNode`	Supporting copy beneath the end-date field. Read only when `children` is unset.
`startErrorMessage?`	`RemixNode`	Validation message beneath the start-date field. Read only when `children` is unset.
`endErrorMessage?`	`RemixNode`	Validation message beneath the end-date field. Read only when `children` is unset.
`startName?`	`string`	Native `name` submitted with an enclosing form for the start-date field.
`endName?`	`string`	Native `name` submitted with an enclosing form for the end-date field.
`startValue?`	`string`	Current start-of-range value, in `YYYY-MM-DD` form, for a fallback pair a consumer tracks itself.
`endValue?`	`string`	Current end-of-range value, in `YYYY-MM-DD` form, for a fallback pair a consumer tracks itself.
`startDefaultValue?`	`string`	Initial start-of-range value, in `YYYY-MM-DD` form, for a fallback pair left to the platform's own uncontrolled state.
`endDefaultValue?`	`string`	Initial end-of-range value, in `YYYY-MM-DD` form, for a fallback pair left to the platform's own uncontrolled state.
`min?`	`string`	Earliest accepted date, in `YYYY-MM-DD` form, read by both of the fallback pair's fields.
`max?`	`string`	Latest accepted date, in `YYYY-MM-DD` form, read by both of the fallback pair's fields.
`step?`	`number`	Granularity, in days, both of the fallback pair's values must fall on.
`required?`	`boolean`	Marks both of the fallback pair's fields required for their enclosing form.
`disabled?`	`boolean`	Marks both of the fallback pair's fields inert and excluded from the tab order.
`readOnly?`	`boolean`	Marks both of the fallback pair's fields' values fixed, while keeping them focusable and included in form submission.
`autoComplete?`	`string`	Native autofill hint for both of the fallback pair's fields.
`parts?`	`PartsProps`	Per-part styling for the fallback pair's internally composed DateField instances. Read only when `children` is unset.
`children?`	`RemixNode`	The joined layout — typically a `Label` and a DateRangePicker.Group — rendered in place of the paired fields, leaving every field above unread when set.

Also accepts everything in Omit<TagProps<"div">, "children">.