DateInputProps
Properties
Section titled “Properties”aria-describedby?
Section titled “aria-describedby?”"aria-describedby"?: string;ids of external error/help text.
className?
Section titled “className?”className?: string;defaultValue?
Section titled “defaultValue?”defaultValue?: string | null;Uncontrolled initial value as YYYY-MM-DD. Ignored when value is given.
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?”disabled?: boolean;emitOutOfRange?
Section titled “emitOutOfRange?”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.id?: string;Base id; each segment derives ${id}-day, ${id}-month, ${id}-year.
invalid?
Section titled “invalid?”invalid?: boolean;Sets aria-invalid and data-invalid on the group.
label?
Section titled “label?”label?: ReactNode;Accessible name for the whole field.
locale?
Section titled “locale?”locale?: string;BCP 47 tag deciding segment order, separators and month names.
Default
Section titled “Default”the runtime's localemax?: string;Latest allowed date, inclusive, as YYYY-MM-DD.
min?: string;Earliest allowed date, inclusive, as YYYY-MM-DD.
name?: string;Emits a hidden input carrying the ISO value, readable by a native <form>.
onBlur?
Section titled “onBlur?”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?”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?”onFocus?: (event) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onPartsChange?
Section titled “onPartsChange?”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?”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?”placeholders?: DatePlaceholders;Placeholder per segment.
Default
Section titled “Default”dd / mm / yyyy
readOnly?
Section titled “readOnly?”readOnly?: boolean;renderSegment?
Section titled “renderSegment?”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?”required?: boolean;segmentLabels?
Section titled “segmentLabels?”segmentLabels?: DateSegmentLabels;Accessible name per segment.
Default
Section titled “Default”Day / Month / Year
style?
Section titled “style?”style?: CSSProperties;value?
Section titled “value?”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.