DatePicker

A labeled date field built on DateField, with a DatePicker.Group row for composing more than one field into a single control.

Start date

Today — this claim posts in the current period.

View code

let today = new Date();
let value = dayKey(today);

function readField(event: Event) {
	value = (event.target as HTMLInputElement).value;
	void handle.update();
}

<DatePicker mix={[on<HTMLDivElement, "change">("change", readField)]}>
	<Label htmlFor="startDate">Start date</Label>
	<DatePicker.Group>
		<Input id="startDate" type="date" name="startDate" defaultValue={value} />
	</DatePicker.Group>
	<Description>{relativeDayHint(parseDayValue(value), today)}</Description>
</DatePicker>

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 { DatePicker } from "@sdxc/ui";

Renders DatePicker's root. Leaving children unset renders the field, passing every prop above through unchanged; composing DatePicker.Group as children instead renders the joined row and leaves those props unread.

Composition

The parts the component publishes, each a static property of the host.

DatePicker
DatePicker.GroupRenders DatePicker's control row: a flex host laying one or more date controls side by side and joining their edges, so a pair reads as one field.

Examples

<DatePicker>
	<Label htmlFor="startDate">{t("form.startDate.label")}</Label>
	<DatePicker.Group>
		<Input id="startDate" type="date" name="startDate" />
	</DatePicker.Group>
</DatePicker>

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 field's focus ring. Read only when `children` is unset.
`label?`	`RemixNode`	The fallback field's caption, rendered through DateField. Read only when `children` is unset.
`description?`	`RemixNode`	Supporting copy beneath the fallback field. Read only when `children` is unset.
`errorMessage?`	`RemixNode`	Validation message beneath the fallback field. Read only when `children` is unset.
`name?`	`string`	Native `name` submitted with an enclosing form, read only by the fallback field.
`value?`	`string`	Current value, in `YYYY-MM-DD` form, for a fallback field a consumer tracks itself.
`defaultValue?`	`string`	Initial value, in `YYYY-MM-DD` form, for a fallback field left to the platform's own uncontrolled state.
`min?`	`string`	Earliest accepted date, in `YYYY-MM-DD` form, read only by the fallback field.
`max?`	`string`	Latest accepted date, in `YYYY-MM-DD` form, read only by the fallback field.
`step?`	`number`	Granularity, in days, the fallback field's value must fall on.
`required?`	`boolean`	Marks the fallback field required for its enclosing form.
`disabled?`	`boolean`	Marks the fallback field inert and excluded from the tab order.
`readOnly?`	`boolean`	Marks the fallback field's value fixed, while keeping it focusable and included in form submission.
`autoComplete?`	`string`	Native autofill hint for the fallback field, e.g. `"bday"`.
`parts?`	`PartsProps`	Per-part styling for the fallback field's internally composed parts. Read only when `children` is unset.
`children?`	`RemixNode`	The composed layout — typically a `Label` and a DatePicker.Group — rendered in place of the field, leaving every field above unread.

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

DatePicker.Group

Also accepts everything in TagProps<"div">.