Date Field Single

Implementation
DateFieldSingle Props
DateFieldSingleChange

Common Examples

import { DateFieldSingle } from "@servicetitan/anvil2";

function ExampleComponent() {
  return <DateFieldSingle defaultValue={new Date().toISOString()} />;
}

Date string values

DateFieldSingle accepts and returns ISO 8601 date strings (for example, "2025-07-02") rather than JavaScript Date objects. Convert Date values from API clients or Anvil1 Date Picker before passing them to the component.

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.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

defaultValue

string | null

Uncontrolled initial value for the date range.

onChange

(change: DateFieldSingleChange) => void

Callback fired when the value changes.

value

string | null

Controlled value for the date range (ISO 8601 strings).

disableCalendar

boolean

default:"false"

If true, disables the calendar popover.

disableHint

boolean

default:"false"

If true, disables the format hint below the field.

maxDate

string

Maximum selectable date (ISO 8601).

minDate

string

Minimum selectable date (ISO 8601).

mode

"mm/dd/yyyy" | "dd/mm/yyyy"

default:"mm/dd/yyyy"

Date input format.

required

boolean

default:"false"

If true, the field is required.

timezone

IanaZone

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

description

string

Additional description below the field.

disabled

boolean

default:"false"

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.

hideLabel

boolean

default:"false"

Visually hides the label while keeping it accessible to screen readers via aria-label.

label

ReactNode

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.

labelProps

Additional props passed to the FieldLabel component. Supports the aiMark prop for displaying AI-powered field indicators.

boolean

default:"false"

If true, shows a loading spinner.

moreInfo

ReactNode

Additional info icon or content for the label.

placeholder

string

Placeholder text.

size

"small" | "medium" | "large"

default:"medium"

Input size.

suffix

string | ReactElement

Suffix element to display inside the input.

type

default:"text"

Input type.

DateFieldSingleChange

The onChange callback receives a DateFieldSingleChange object with the following properties:

date

string | null

The date in ISO 8601 format (e.g., “2025-07-02”).

isDateValid

boolean

Whether the date is valid according to all constraints (required, unavailable dates/days, min/max date, etc.).

isInputEmpty

boolean

Whether the input is empty.

isInputValid

boolean

Whether the input matches the format and is not empty.

Date Field Single – Code

Common Examples

Date string values

Default values

Controlled usage

Validation

Disabled hint text

Timezone

Disable calendar popover

Markdown in labels

Hide the label

`DateFieldSingle` Props

Additional field props

DateFieldSingleChange

​Common Examples

​Date string values

​Default values

​Controlled usage

​Validation

​Disabled hint text

​Timezone

​Disable calendar popover

​Markdown in labels

​Hide the label

​DateFieldSingle Props

​Additional field props

​DateFieldSingleChange

Common Examples

Date string values

Default values

Controlled usage

Validation

Disabled hint text

Timezone

Disable calendar popover

Markdown in labels

Hide the label

`DateFieldSingle` Props

Additional field props

DateFieldSingleChange