Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
Common Examples
import { DateFieldYearlessRange } from "@servicetitan/anvil2";
function ExampleComponent() {
return <DateFieldYearlessRange label="Date Range" />;
}
Controlled vs Uncontrolled
The DateFieldYearlessRange component can be used in controlled or uncontrolled mode.Uncontrolled
Use defaultValue to set an initial value without controlling the state.Controlled
Use value and onChange for full control over the component state.The component supports two date format modes: mm/dd (default) and dd/mm.With Validation
Show error states when validation fails.Sizes
The component supports small, medium, and large sizes.Custom Labels
Customize the accessible labels for the start and end date fields.React Accessibility
- The component uses a
fieldset with a legend for proper grouping
- Start and end date fields have individual accessible labels (visually hidden)
- Error messages are announced via
aria-live
- The
moreInfo tooltip content is also available to screen readers
For more guidance on form field labels and context, see input field context association best practices.Markdown in labels
The label prop supports inline markdown: bold (**text**), italic (*text*), bold and italic (***text***), highlight (==text==), and code (`text`).Hide the label
Use hideLabel to visually hide the label. The label string is kept as a screen-reader-only <legend> element so the group remains accessible — any inline markdown is stripped to plain text.<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;
};
