<DateFieldYearlessRange
label="Date Range"
mode="mm/dd"
value={{ startDate: { month: 6, day: 1 }, endDate: { month: 8, day: 31 } }}
onChange={(change) => console.log(change)}
required={false}
error={false}
size="medium"
/>
DateFieldYearlessRange Props
The DateFieldYearlessRange component accepts the following props as well as layout utility props.Label for the field. Supports inline markdown formatting.
defaultValue
DateFieldYearlessRangeValue
Default value for uncontrolled usage. Object with startDate and endDate properties, each containing month and day numbers.
Helper text displayed below the input.
Whether the field is disabled.
Whether to hide the format hint (e.g., “Format: mm/dd”).
Whether to disable the date picker popup.
Accessible label for the end date input (visually hidden).
error
ReactElement | string | boolean
Error message or error state for the field.
errorAriaLive
"off" | "polite" | "assertive"
default:"assertive"
The aria-live value for error messages.
Visually hides the label while keeping it accessible to screen readers.
mode
"mm/dd" | "dd/mm"
default:"mm/dd"
The date format mode.
Additional information to display in a tooltip next to the label.
onBlur
(event: React.FocusEvent) => void
Callback when the field loses focus.
onChange
(change: DateFieldYearlessRangeChange) => void
Callback when the date range value changes.
onFocus
(event: React.FocusEvent) => void
Callback when the field receives focus.
Whether the field is required.
size
"small" | "medium" | "large"
The size of the input fields.
startLabel
string
default:"Start date"
Accessible label for the start date input (visually hidden).
value
DateFieldYearlessRangeValue
Controlled value. Object with startDate and endDate properties, each containing month and day numbers or null.
Types
type YearlessDate = {
month: number; // 1-12
day: number; // 1-31
};
type DateFieldYearlessRangeValue = {
startDate: YearlessDate | null;
endDate: YearlessDate | null;
};
type DateFieldYearlessRangeChange = {
startDate: YearlessDate | null;
endDate: YearlessDate | null;
};
