Date Field Yearless Range

Implementation
DateFieldYearlessRange Props

Common Examples

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

function ExampleComponent() {
  return <DateFieldYearlessRange label="Date Range" />;
}

Controlled vs Uncontrolled

The DateFieldYearlessRange component can be used in controlled or uncontrolled mode.

Uncontrolled

Use defaultValue to set an initial value without controlling the state.

Controlled

Use value and onChange for full control over the component state.

Date Format Modes

The component supports two date format modes: mm/dd (default) and dd/mm.

With Validation

Show error states when validation fails.

Sizes

The component supports small, medium, and large sizes.

Custom Labels

Customize the accessible labels for the start and end date fields.

React Accessibility

The component uses a fieldset with a legend for proper grouping
Start and end date fields have individual accessible labels (visually hidden)
Error messages are announced via aria-live
The moreInfo tooltip content is also available to screen readers

For more guidance on form field labels and context, see input field context association best practices.

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 kept as a screen-reader-only <legend> element so the group remains accessible — any inline markdown is stripped to plain text.

<DateFieldYearlessRange
  label="Date Range"
  mode="mm/dd"
  value={{ startDate: { month: 6, day: 1 }, endDate: { month: 8, day: 31 } }}
  onChange={(change) => console.log(change)}
  required={false}
  error={false}
  size="medium"
/>

`DateFieldYearlessRange` Props

The DateFieldYearlessRange component accepts the following props as well as layout utility props.

label

string

required

Label for the field. Supports inline markdown formatting.

defaultValue

DateFieldYearlessRangeValue

Default value for uncontrolled usage. Object with startDate and endDate properties, each containing month and day numbers.

description

ReactElement | string

Helper text displayed below the input.

disabled

boolean

Whether the field is disabled.

disableHint

boolean

Whether to hide the format hint (e.g., “Format: mm/dd”).

disablePicker

boolean

Whether to disable the date picker popup.

endLabel

string

default:"End date"

Accessible label for the end date input (visually hidden).

error

ReactElement | string | boolean

Error message or error state for the field.

errorAriaLive

"off" | "polite" | "assertive"

default:"assertive"

The aria-live value for error messages.

hideLabel

boolean

default:"false"

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

string

Custom ID for the field.

legendProps

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

mode

"mm/dd" | "dd/mm"

default:"mm/dd"

The date format mode.

moreInfo

ReactNode

Additional information to display in a tooltip next to the label.

onBlur

(event: React.FocusEvent) => void

Callback when the field loses focus.

onChange

(change: DateFieldYearlessRangeChange) => void

Callback when the date range value changes.

onFocus

(event: React.FocusEvent) => void

Callback when the field receives focus.

required

boolean

Whether the field is required.

size

"small" | "medium" | "large"

The size of the input fields.

startLabel

string

default:"Start date"

Accessible label for the start date input (visually hidden).

value

DateFieldYearlessRangeValue

Controlled value. Object with startDate and endDate properties, each containing month and day numbers or null.

Types

type YearlessDate = {
  month: number; // 1-12
  day: number;   // 1-31
};

type DateFieldYearlessRangeValue = {
  startDate: YearlessDate | null;
  endDate: YearlessDate | null;
};

type DateFieldYearlessRangeChange = {
  startDate: YearlessDate | null;
  endDate: YearlessDate | null;
};

​Common Examples

​Controlled vs Uncontrolled

​Uncontrolled

​Controlled

​Date Format Modes

​With Validation

​Sizes

​Custom Labels

​React Accessibility

​Markdown in labels

​Hide the label

​DateFieldYearlessRange Props

​Types

Common Examples

Controlled vs Uncontrolled

Uncontrolled

Controlled

Date Format Modes

With Validation

Sizes

Custom Labels

React Accessibility

Markdown in labels

Hide the label

`DateFieldYearlessRange` Props

Types