<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.The label text for the date range field.
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.
Whether to visually hide the label (still accessible to screen readers).
legendProps
Omit<FieldLabelProps, 'el'>
Props to pass to the legend element.
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;
};
