DatePicker
A typed date input with a responsive calendar mounted in the nearest theme portal.@gemologic/sheen-date · date and timePlayground
This example has no scalar controls. Its validated source remains interactive below.
<DatePicker label="Settlement date" name="settlesAt" defaultValue={createCalendarDate(2026, 9, 10)} defaultVisibleDate={createCalendarDate(2026, 9, 1)} />Variant matrix
Settlement date
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: textbox and calendar dialogKeyboard: Tab, Enter, Space, Escape, Arrow keys, PageUp, PageDown, Home, EndDo
- Keep the picker inside ThemeProvider so its overlay inherits the effective scope.
Do not
- Do not replace accepted content while date constraints refresh.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
value | CalendarDate | null | — | App-owned Sheen CalendarDate, or null. |
defaultValue | CalendarDate | null | — | Initial uncontrolled value. |
onValueChange | (value: CalendarDate | null) => void | — | Receives complete valid dates and clearing. |
presets | readonly DatePreset[] | — | Deterministic labeled Sheen date shortcuts. |
label * | string | — | Required visible field label. |
minValue | CalendarDate | — | Earliest selectable date. |
maxValue | CalendarDate | — | Latest selectable date. |
isDateUnavailable | (value: CalendarDate) => boolean | — | Marks dates unavailable with a Sheen value callback. |
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 YYYY-MM-DD. |
form | string | — | Optional external form owner. |
description | string | — | Associated instructions. |
error | string | — | Associated app validation error. |
placeholder | string | — | Text input placeholder. |
required | boolean | false | Marks the picker required. |
disabled | boolean | false | Disables input, trigger, and projection. |
readOnly | boolean | false | Allows inspection while rejecting changes. |