DateTimePicker
A date, wall-time, and IANA-zone editor that resolves instants without hiding DST ambiguity.@gemologic/sheen-date · date and timePlayground
<DateTimePicker label="Maintenance start" name="startsAt" timeZoneOptions={[{ id: "UTC", label: "UTC" }, { id: "America/New_York", label: "New York" }]} defaultValue={createDateTime(1788897600000, createTimeZone("UTC"))} disambiguation="reject" granularity="minute" timeZoneChangeBehavior="preserve-instant"/>Variant matrix
Maintenance start
disambiguation: reject
disambiguation: earlier
disambiguation: later
disambiguation: compatible
timeZoneChangeBehavior: preserve-instant
timeZoneChangeBehavior: preserve-wall
hourCycle: 12
hourCycle: 24
granularity: minute
granularity: second
Anatomy
- Package
@gemologic/sheen-date- Source
packages/date/src/DateTimePicker.tsx- Tokens
--sheen-color-bg-raised--sheen-color-border-control--sheen-color-warning-border--sheen-color-focus-ring
Accessibility
Role: group, textbox, spinbuttons, combobox, alertKeyboard: Tab, Shift+Tab, Enter, Space, Escape, Arrow keys, PageUp, PageDown, Home, EndDo
- Keep reject as the default when the app must distinguish repeated or skipped local times.
- Choose zone-change semantics for the application's domain.
Do not
- Do not silently substitute the browser timezone or accept an ambiguous wall time.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required visible fieldset legend. |
value | DateTime | null | — | App-owned Sheen DateTime instant, or null. |
defaultValue | DateTime | null | — | Initial uncontrolled instant. |
onValueChange | (value: DateTime | null) => void | — | Receives exact or explicitly disambiguated instants and clearing. |
onResolution | (resolution: DateTimeResolution) => void | — | Observes every exact, ambiguous, or nonexistent wall-time resolution. |
timeZoneOptions * | readonly TimeZoneOption[] | — | Explicit stable IANA zones passed to the zone combobox. |
timeZonePending | boolean | false | Retains accepted zone options while an app-owned refresh is in flight. |
timeZoneError | string | — | Safe app-owned zone request error. |
onTimeZoneRetry | () => void | — | Optional app retry action for a failed zone request. |
defaultTimeZone | TimeZone | — | Zone used by an empty draft, defaulting to UTC. |
defaultDate | CalendarDate | — | Deterministic empty date placeholder. |
defaultTime | Time | — | Deterministic empty wall-time placeholder. |
disambiguation | DateTimeDisambiguation | reject | Policy for repeated or skipped local times; reject exposes an explicit choice. |
timeZoneChangeBehavior | TimeZoneChangeBehavior | preserve-instant | Whether a zone change preserves the accepted instant or reinterprets the wall time. |
locale | string | — | Explicit BCP 47 locale, defaulting to context. |
calendar | string | — | Optional calendar used only for date presentation and interaction. |
hourCycle | 12 | 24 | — | Explicit 12- or 24-hour cycle. |
granularity | "minute" | "second" | minute | Smallest wall-time segment. |
name | string | — | Native form name for the ISO instant with bracketed IANA zone. |
form | string | — | Optional external form owner. |
description | string | — | Associated instructions. |
error | string | — | Associated app validation error. |
dateLabel | string | — | Localized label for the date subfield. |
timeLabel | string | — | Localized label for the wall-time subfield. |
timeZoneLabel | string | — | Localized label for the zone subfield. |
required | boolean | false | Marks all subfields required. |
disabled | boolean | false | Disables all subfields and projection. |
readOnly | boolean | false | Allows inspection while rejecting changes. |