Date Field Yearless

Implementation
DateFieldYearless Props
DateFieldYearlessChange

Common Examples

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

function ExampleComponent() {
  return <DateFieldYearless defaultValue={{ month: 3, day: 22 }} />;
}

Default values

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

Controlled usage

The DateFieldYearless 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.isValid will tell you if the field can be parsed into a valid month and day and if it meets the criteria of minDate, maxDate, required, and unavailable.isInputValid will tell you only if the underlying input is parseable into a month and a day — 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.

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.

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

<DateFieldYearless data-cy="birthday" label="Birthday" />

cy.get('[data-cy="birthday"]').type("06/15");

`data-anv-part`	Element
`date-input`	Masked month/day text input
`popover`	Picker popover container
`month-list`	Month listbox inside the picker
`day-list`	Day listbox inside the picker
`option`	A month or day option (`data-id` = its value)

The popover and lists 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. Only one picker is open at a time.

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

function ExampleComponent() {
return (

<DateFieldYearless
  defaultValue={{ month: 3, day: 22 }}
  mode="mm/dd"
  disableHint={false}
  required={false}
/>
); }

`DateFieldYearless` Props

"YearlessDate" | "null"

Uncontrolled initial value for the yearless date.

(change: DateFieldYearlessChange) => void

Callback fired when the value changes.

"YearlessDate" | "null"

Controlled value for the yearless date.

boolean

default:"false"

If true, disables the format hint below the field.

"YearlessDate" | "null"

Maximum selectable yearless date.

"YearlessDate" | "null"

Minimum selectable yearless date.

"mm/dd" | "dd/mm"

default:"mm/dd"

Date input format (yearless).

boolean

default:"false"

If true, the field is required.

{ dates?: YearlessDate[] }

Yearless dates that are unavailable for selection.

Additional field props

The DateFieldYearless also support 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.

FieldLabelProps

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.

DateFieldYearlessChange

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

boolean

Whether the input is empty.

boolean

Whether the input matches the format and is not empty.

boolean

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

string | null

The year-less date as an object with keys day and month.

Anvil2 Web

Resources

Date Field Yearless – Code

Common Examples

Default values

Controlled usage

Validation

Disabled hint text

Markdown in labels

Hide the label

Testing

`DateFieldYearless` Props

Additional field props

DateFieldYearlessChange

​Common Examples

​Default values

​Controlled usage

​Validation

​Disabled hint text

​Markdown in labels

​Hide the label

​Testing

​DateFieldYearless Props

​Additional field props

​DateFieldYearlessChange

Common Examples

Default values

Controlled usage

Validation

Disabled hint text

Markdown in labels

Hide the label

Testing

`DateFieldYearless` Props

Additional field props

DateFieldYearlessChange