DateRangePicker

A two-ended date picker that keeps its incomplete range draft while accepted state refreshes.@gemologic/sheen-date · date and time

Playground

This example has no scalar controls. Its validated source remains interactive below.

Report window

<DateRangePicker label="Report window" name="window" defaultValue={createDateRange(createCalendarDate(2026, 9, 1), createCalendarDate(2026, 9, 8))} />

Variant matrix

Report window

Anatomy

Package

@gemologic/sheen-date

Source

packages/date/src/DatePicker.tsx

Tokens

--sheen-color-bg-raised
--sheen-color-border-control
--sheen-color-focus-ring

Accessibility

Role: two textboxes and calendar dialogKeyboard: Tab, Enter, Space, Escape, Arrow keys, PageUp, PageDown, Home, End

Do

Treat a one-ended calendar interaction as a draft, not an accepted range.

Do not

Do not infer missing endpoints or submit two unrelated fields.

Generated props

Name	Type	Default	Description
`value`	`DateRange \| null`	—	App-owned ordered Sheen DateRange, or null.
`defaultValue`	`DateRange \| null`	—	Initial uncontrolled accepted range.
`onValueChange`	`(value: DateRange \| null) => void`	—	Receives only complete ordered ranges or explicit clearing.
`presets`	`readonly DateRangePreset[]`	—	Deterministic labeled Sheen range shortcuts.
`endLabel`	`string`	—	Accessible label for the second endpoint, defaulting to the range label plus end.
`label` *	`string`	—	Required visible range label.
`minValue`	`CalendarDate`	—	Earliest selectable endpoint.
`maxValue`	`CalendarDate`	—	Latest selectable endpoint.
`isDateUnavailable`	`(value: CalendarDate) => boolean`	—	Marks endpoint dates unavailable.
`defaultVisibleDate`	`CalendarDate`	—	Deterministic initially visible month.
`locale`	`string`	—	Explicit BCP 47 locale, defaulting to theme context.
`calendar`	`string`	—	Optional presentation calendar identifier.
`name`	`string`	—	Native form name for the start/end ISO interval.
`form`	`string`	—	Optional external form owner.
`description`	`string`	—	Associated instructions.
`error`	`string`	—	Associated app validation error.
`placeholder`	`string`	—	Empty endpoint placeholder.
`required`	`boolean`	`false`	Marks both endpoints required.
`disabled`	`boolean`	`false`	Disables interaction and projection.
`readOnly`	`boolean`	`false`	Allows inspection while rejecting changes.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.