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.
Implementation
DateFieldSingle Props
DateFieldSingleChange
Common Examples
import { DateFieldSingle } from "@servicetitan/anvil2";
function ExampleComponent() {
return <DateFieldSingle defaultValue={new Date().toISOString()} />;
}
Default values
Default values can be included in DateFieldSingle to use the field in an uncontrolled mode.Controlled usage
The DateFieldSingle can be controlled. This means you can maintain the state outside the component. Listen for new dates with onChange and supply a date into the value prop.Validation
Understanding the object passed back in onChange is key to understanding how to validate this field.isDateValid will tell you if the last entered date is valid according to the props you’ve supplied (e.g. required, minDate, maxDate, and unavailable).isInputValid will tell you only if the underlying input is a parseable date — this does not consider whether the date is good according the other props.isInputEmpty will tell you if the underlying input has no digits entered.Typically, you will want to use these values together to determine the overall validity of the field. Though the simplest implementation may likely suffice to use only isDateValid.Disabled hint text
The hint text can be disabled. If the hint text is disabled, ensure that the date format is displayed on the page.Timezone
The timezone prop controls the meaning of the “Today” button and which month-year the calendar initially displays. When the timezone differs from the user’s locale, a disambiguation message appears below the calendar.Disable calendar popover
The display of the Calendar can be prevented by passing disableCalendar.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 converted to an aria-label on the input so it remains accessible to screen readers — any inline markdown is stripped to plain text.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.
IANA timezone identifier (e.g., “America/Los_Angeles”). Controls the “Today” button behavior and initial calendar display. Shows a disambiguation message when different from the user’s locale timezone.
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.
Visually hides the label while keeping it accessible to screen readers via aria-label.
Label for the field. Supports inline markdown formatting.Omitting label is deprecated and will be required in v4.0.0. Use hideLabel to visually hide it. Passing ReactNode is also deprecated — use a plain string with inline markdown instead.
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.
