Date Field Range

Implementation
DateFieldRange Props
DateFieldRangeChange

Common Examples

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

function ExampleComponent() {
  return (
    <DateFieldRange
      defaultValue={{
        startDate: "1999-12-25",
        endDate: new Date().toISOString(),
      }}
    />
  );
}

Date string values

DateFieldRange accepts and returns ISO 8601 date strings for startDate and endDate rather than JavaScript Date objects. Convert Date values from API clients or Anvil1 Date Range Picker before passing them to the component.

Default values

Default values can be included in DateFieldRange to use the field in an uncontrolled mode.

Controlled usage

The DateFieldRange can be controlled. This means you can maintain the state outside the component. Listen for new dates with onChange and supply dates into the value prop.

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.

Testing

The field’s interactive sub-elements carry a stable data-anv-part attribute so end-to-end tests can target them directly. The library owns the part names; you supply the instance identifier.Attach your own data-* attribute (such as data-cy or data-testid) to the field. It is forwarded to the masked text input — the one element present in every mode, including disableCalendar:

<DateFieldRange data-cy="booking-range" label="Booking range" />

cy.get('[data-cy="booking-range"]').type("06/15/2025 – 06/20/2025");

`data-anv-part`	Element
`date-input`	Masked text input
`popover`	Calendar popover container
`date-calendar`	Calendar surface inside the popover

The popover and calendar render in the browser’s top layer, outside the input’s subtree, so a descendant query scoped to your data-cy on the input will not reach them. Target them by their part attribute directly ([data-anv-part="date-calendar"]) or by the popover’s data-testid="calendar-popover". Only one calendar is open at a time.

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

"{ startDate: string" | "null; endDate: string" | "null }" | "null"

Uncontrolled initial value for the date range.

(change: DateFieldRangeChange) => void

Callback fired when the value changes.

"{ startDate: string" | "null; endDate: string" | "null }" | "null"

Controlled value for the date range (ISO 8601 strings)

boolean

If true, disables the calendar popover.

boolean

default:"false"

If true, disables the format hint below the field.

string

Maximum selectable date (ISO 8601).

string

Minimum selectable date (ISO 8601).

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

default:"mm/dd/yyyy"

Date input format.

boolean

default:"false"

If true, the field is required.

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.

{ 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:

string

Additional description below the field.

boolean

default:"false"

If true, disables the field.

ReactElement | string | boolean

Error message or state.

"off" | "polite" | "assertive"

default:"assertive"

ARIA live region setting for error messages.

boolean

default:"false"

Visually hides the label while keeping it accessible to screen readers via aria-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.

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.

ReactNode

Additional info icon or content for the label.

string

Placeholder text.

"small" | "medium" | "large"

default:"medium"

Input size

string | ReactElement

Suffix element to display inside the input.

default:"text"

Input type.

DateFieldRangeChange

The following object is passed back to you in the onChange handler.

string | null

The end date in ISO 8601 format. Example: “2025-07-02”.

boolean

Whether the start and end dates are valid according to the constraints (required, unavailable dates/days, min/max date).

boolean

Whether the input field is empty.

boolean

Whether the input field contains two parsable dates. This is not the same as the date range being valid.

string | null

The start date in ISO 8601 format. Example: “2025-03-22”.

Anvil2 Web

Resources

Date Field Range – Code

Common Examples

Date string values

Default values

Controlled usage

Disabled hint text

Timezone

Disable calendar popover

Markdown in labels

Hide the label

Testing

`DateFieldRange` Props

Additional field props

DateFieldRangeChange

​Common Examples

​Date string values

​Default values

​Controlled usage

​Disabled hint text

​Timezone

​Disable calendar popover

​Markdown in labels

​Hide the label

​Testing

​DateFieldRange Props

​Additional field props

​DateFieldRangeChange

Common Examples

Date string values

Default values

Controlled usage

Disabled hint text

Timezone

Disable calendar popover

Markdown in labels

Hide the label

Testing

`DateFieldRange` Props

Additional field props

DateFieldRangeChange