import { DateFieldSingle } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<DateFieldSingle
defaultValue={new Date().toISOString()}
mode="mm/dd/yyyy"
disableHint={false}
disableCalendar={false}
required={false}
/>
); }
DateFieldSingle Props
Uncontrolled initial value for the date range.
onChange
(change: DateFieldSingleChange) => void
Callback fired when the value changes.
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
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.
DateFieldSingleChange
The onChange callback receives a DateFieldSingleChange object with the following properties:The date in ISO 8601 format (e.g., “2025-07-02”).
Whether the date is valid according to all constraints (required, unavailable
dates/days, min/max date, etc.).
Whether the input is empty.
Whether the input matches the format and is not empty.
