HyDateField
Usage examples on this page are written for Lit / plain HTML (
<hy-date-field>). The same component ships asHyDateFieldin@whitespaceux/harmony-react(native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.
A locale-aware segmented date (and optional time) input. Each unit (month / day / year, plus hour / minute in datetime mode) is an arrow-adjustable, type-to-edit spinbutton — the keyboard-first, screen- reader-friendly replacement for a readonly trigger. No calendar; compose with hy-date-picker for the popover.
Independently form-associated — usable standalone with its own name / value and form-control surface (hy-date-picker composes it rather than re-implementing).
Value is ISO YYYY-MM-DD (date) or YYYY-MM-DDTHH:MM (datetime). Segment order, separators, and 12/24h come from the resolved locale via Intl.
Examples
<hy-date-field label="Start date" value="2026-03-07"></hy-date-field>
<hy-date-field type="datetime" label="Starts at"></hy-date-field>API
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | ISO value: YYYY-MM-DD (date) or YYYY-MM-DDTHH:MM (datetime). |
type | type | 'date' | 'datetime' | 'date' | date (default) or datetime (adds hour/minute segments). |
min | min | string | undefined | — | — |
max | max | string | undefined | — | — |
locale | locale | string | undefined | — | — |
label | label | string | '' | — |
helpText | help-text | string | '' | — |
errorMessage | error-message | string | '' | — |
invalid | invalid | boolean | false | — |
disabled | disabled | boolean | false | — |
name | name | string | '' | — |
size | size | 'small' | 'medium' | 'large' | 'medium' | — |
width | width | string | undefined | — | — |
autofocus | autofocus | boolean | false | — |
form | — | HTMLFormElement | null | — | — |
validity | — | ValidityState | — | — |
Events
| Event | Detail | Description |
|---|---|---|
input | — | Fires on each segment edit that yields a complete valid value. |
change | — | Fires on blur / Enter once all segments form a valid value. |
CSS Parts
| Part | Description |
|---|---|
base | Outer wrapper (label, field, helper/error) |
label | The visible label |
field | The segmented input row |
segment | A single editable segment |
helper-text | Helper text |
error-message | Error message when invalid |
CSS Custom Properties
| Property | Description |
|---|---|
--hy-date-field-height-sm | Small-size outer height (default var(--hy-control-height-sm)) |
--hy-date-field-height-md | Medium-size outer height (default var(--hy-control-height-md)) |
--hy-date-field-height-lg | Large-size outer height (default var(--hy-control-height-lg)) |