DateInputProps
Properties
Section titled “Properties”aria-describedby?
Section titled “aria-describedby?”optional aria-describedby?: string;ids of external error/help text.
className?
Section titled “className?”optional className?: string;defaultValue?
Section titled “defaultValue?”optional defaultValue?: string | null;Uncontrolled initial value as YYYY-MM-DD. Ignored when value is given.
optional dir?: "ltr" | "rtl";Writing direction for the field. Inherited from the document when unset.
Distinct from the locale: locale decides which segments there are and in
what order, dir decides which way the box lays them out. A Hebrew page
showing a Gregorian date needs one without the other.
disabled?
Section titled “disabled?”optional disabled?: boolean;emitOutOfRange?
Section titled “emitOutOfRange?”optional emitOutOfRange?: boolean;Report a completed date outside min/max through onChange anyway,
leaving the field marked invalid rather than refusing the input.
Default
Section titled “Default”true — the alternative silently discards what the user typed.optional id?: string;Base id; each segment derives ${id}-day, ${id}-month, ${id}-year.
invalid?
Section titled “invalid?”optional invalid?: boolean;Sets aria-invalid and data-invalid on the group.
label?
Section titled “label?”optional label?: ReactNode;Accessible name for the whole field.
locale?
Section titled “locale?”optional locale?: string;BCP 47 tag deciding segment order, separators and month names.
Default
Section titled “Default”the runtime's localeoptional max?: string;Latest allowed date, inclusive, as YYYY-MM-DD.
optional min?: string;Earliest allowed date, inclusive, as YYYY-MM-DD.
optional name?: string;Emits a hidden input carrying the ISO value, readable by a native <form>.
onBlur?
Section titled “onBlur?”optional onBlur?: (event) => void;Fires when focus leaves the whole field, not when moving between segments.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onChange?
Section titled “onChange?”optional onChange?: (value) => void;Fires when the date becomes complete and valid, and when it stops being so. Never fires mid-entry with a half-typed date.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
value | string | null |
Returns
Section titled “Returns”void
onFocus?
Section titled “onFocus?”optional onFocus?: (event) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onPartsChange?
Section titled “onPartsChange?”optional onPartsChange?: (parts) => void;Fires on every keystroke, including while the date is incomplete.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
parts | DateParts |
Returns
Section titled “Returns”void
onWarn?
Section titled “onWarn?”optional onWarn?: (warning) => void;Called in development whenever a prop is rejected or coerced — see
DateWarning. When omitted, the same warnings go to console.warn.
The entire path is stripped from production builds.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
warning | DateWarning |
Returns
Section titled “Returns”void
placeholders?
Section titled “placeholders?”optional placeholders?: DatePlaceholders;Placeholder per segment.
Default
Section titled “Default”dd / mm / yyyy
readOnly?
Section titled “readOnly?”optional readOnly?: boolean;renderSegment?
Section titled “renderSegment?”optional renderSegment?: (state) => ReactNode;Custom rendering for one segment.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
state | DateSegmentState |
Returns
Section titled “Returns”ReactNode
required?
Section titled “required?”optional required?: boolean;segmentLabels?
Section titled “segmentLabels?”optional segmentLabels?: DateSegmentLabels;Accessible name per segment.
Default
Section titled “Default”Day / Month / Year
style?
Section titled “style?”optional style?: CSSProperties;value?
Section titled “value?”optional value?: string | null;Controlled value as YYYY-MM-DD, or null for empty.
A string, never a Date: a calendar date is not a point in time, and the
moment it becomes one it acquires a timezone that shifts it by a day west
of UTC. See the README.