import { DateFieldRange } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<DateFieldRange
defaultValue={{
startDate: "1999-12-25",
endDate: new Date().toISOString(),
}}
mode="mm/dd/yyyy"
disableHint={false}
disableCalendar={false}
required={false}
/>
); }
DateFieldRange Props
defaultValue
"{ startDate: string" | "null; endDate: string" | "null }" | "null"
Uncontrolled initial value for the date range.
onChange
(change: DateFieldRangeChange) => void
Callback fired when the value changes.
value
"{ startDate: string" | "null; endDate: string" | "null }" | "null"
Controlled value for the date range (ISO 8601 strings)
If true, disables the calendar popover.
If true, disables the format hint below the field.
Maximum selectable date (ISO 8601).
Minimum selectable date (ISO 8601).
mode
"mm/dd/yyyy" | "dd/mm/yyyy"
default:"mm/dd/yyyy"
Date input format.
If true, the field is required.
unavailable
{ dates?: string[]; daysOfWeek?: (1 | 2 | 3 | 4 | 5 | 6 | 7)[] }
Dates or days of week that are unavailable for selection.
Additional field props
The DateFieldRange also supports the following props which are common to most field components:Additional description below the field.
If true, disables the field.
error
ReactElement | string | boolean
Error message or state.
errorAriaLive
"off" | "polite" | "assertive"
default:"assertive"
ARIA live region setting for error messages.
Additional props for the label element.
If true, shows a loading spinner.
Additional info icon or content for the label.
size
"small" | "medium" | "large"
default:"medium"
Input size
Suffix element to display inside the input.
type
"text" | "email" | "tel" | "url" | "password" | "number"
default:"text"
Input type.
DateFieldRangeChange
The following object is passed back to you in the onChange handler.The end date in ISO 8601 format. Example: “2025-07-02”.
Whether the start and end dates are valid according to the constraints
(required, unavailable dates/days, min/max date).
Whether the input field is empty.
Whether the input field contains two parsable dates. This is not the same as
the date range being valid.
The start date in ISO 8601 format. Example: “2025-03-22”.
