Date Field Yearless

For development, import DateFieldYearless from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

Date Field Yearless consists of five primary elements that enable users to select a month and day without year information.

Label - Identifies the field and its purpose
Input field - Text input for manual month and day entry with format mask
Helper text (Optional) - Description, format hint or error message

Options

Date Field Yearless supports the following configurations to accommodate different use cases and regional preferences.

Date Format Modes

Date Field Yearless supports two date format modes to match regional conventions. The default format is mm/dd for US audiences, while dd/mm is available for international users.

Mode	Format	Use Case
mm/dd	Default	US date format
dd/mm	Optional	International date format

Sizes

Three size options accommodate different layout densities and visual hierarchies.

Size	Height
Small	32px
Medium	40px
Large	48px

Date Picker

The date picker can be disabled when manual text entry is preferred or when the picker interface is not suitable for the use case.

Behavior

Date Field Yearless responds to user interaction with distinct visual states and validation feedback.

Visual States

The component displays different visual states to communicate field status and interactivity. Default state shows the field ready for input. Focus state highlights the active field. Error state displays validation messages when dates are invalid or required fields are empty. Disabled state prevents interaction while maintaining visual context.

Date Picker Interaction

Clicking the input field opens a popover with two scrollable lists for month and day selection. Users can scroll through months and days and select values directly from the lists. The picker closes automatically after selection, and the selected month and day populate the input field.

Validation

Date Field Yearless validates input in real time. The component checks for parseable month and day values, required field completion, date constraints (min/max dates), and unavailable dates. Error messages appear below the field when validation fails.

Usage Guidelines

Standard	Requirement
DoCapturing recurring dates	Capture recurring dates where year is irrelevant
DoSelecting template dates	Select template dates for annual events
DoInputting birthdays or anniversaries	Input birthdays or anniversaries
DoCreating seasonal date selections	Create seasonal date selections
DoLabel yearless dates clearly	Write labels that clearly indicate year isn’t needed, include format hints, and maintain consistency alongside year-specific dates; see Labeling and Yearless Context.
Don’tSpecific dates with year	Use Date Field Single instead
Don’tDate ranges	Use Date Field Range or Date Field Yearless Range instead
Don’tTime selection	Use Time Field for time-only inputs
Don’tAmbiguous context or mixed patterns	Don’t use Date Field Yearless for dates that require year information or mix yearless and year-specific patterns without clear distinction; see Anti-pattern: Ambiguous Context and Mixed Patterns.

Alternatives

Date Field Yearless vs Date Field Single

Use Date Field Yearless when the year is irrelevant to the date selection, such as recurring annual events or template dates. Use Date Field Single when the year is essential, such as appointment scheduling or deadline setting.

How to Use

Labeling and Yearless Context

Provide clear, descriptive labels that communicate the purpose of the date selection and indicate that year information is not required. Labels should clarify that only month and day are needed, helping users understand why year input is omitted. This pattern simplifies input for recurring annual events.

Write labels that clearly communicate the purpose and indicate year is not needed
Include format hints to guide users on expected input format (mm/dd or dd/mm)
Set appropriate date constraints (min/max dates) when applicable to prevent invalid selections
Display validation errors immediately when they occur
Use Date Field Yearless for recurring dates where year context is not needed
Maintain consistency when using yearless dates alongside year-specific dates in forms

Anti-pattern: Ambiguous Context and Mixed Patterns

Avoid creating confusion by using Date Field Yearless for dates that require year information or mixing yearless and year-specific patterns without clear distinction.

Use Date Field Yearless for dates that require year information
Omit format hints when the date format might be ambiguous to users
Hide validation errors until form submission
Use placeholder text to communicate date format instead of format hints
Mix yearless dates with year-specific dates in the same form without clear visual or contextual distinction
Create labels that don’t indicate year is not required

Content

Content within Date Field Yearless should be clear, concise, and actionable.

Labels should clearly indicate what date is being selected and that year is not required
Error messages should explain why a date is invalid and how to fix it
Format hints should match the selected mode (mm/dd or dd/mm)
Descriptions should provide context without overwhelming the user

Keyboard Interaction

Users can navigate Date Field Yearless using standard keyboard controls.

Input Field

Key	Description
Tab	Moves focus to the next element
Shift + Tab	Moves focus to the previous element
Arrow Down	Opens the date picker when focused
Esc	Closes the date picker

Date Picker

Key	Description
Arrow Up	Moves focus to the previous item in the list
Arrow Down	Moves focus to the next item in the list
Esc	Closes the date picker

Accessibility

Date Field Yearless includes built-in accessibility features. The component supports full keyboard navigation and screen reader compatibility. Ensure labels are descriptive and error messages are clear for assistive technology users. For more guidance on form field labels and context, see input field context association best practices.

Code

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.

Concepts & Guidelines

Anvil2

Resources

Date Field Yearless - Web

Anatomy

Options

Date Format Modes

Sizes

Date Picker

Behavior

Visual States

Date Picker Interaction

Validation

Usage Guidelines

Alternatives

Date Field Yearless vs Date Field Single

How to Use

Labeling and Yearless Context

Anti-pattern: Ambiguous Context and Mixed Patterns

Content

Keyboard Interaction

Input Field

Date Picker

Accessibility

Code

Common Examples

Default values

Controlled usage

Validation

Disabled hint text

Markdown in labels

Hide the label

Testing

`DateFieldYearless` Props

Additional field props

DateFieldYearlessChange

​Anatomy

​Options

​Date Format Modes

​Sizes

​Date Picker

​Behavior

​Visual States

​Date Picker Interaction

​Validation

​Usage Guidelines

​Alternatives

​Date Field Yearless vs Date Field Single

​How to Use

​Labeling and Yearless Context

​Anti-pattern: Ambiguous Context and Mixed Patterns

​Content

​Keyboard Interaction

​Input Field

​Date Picker

​Accessibility

​Code

​Common Examples

​Default values

​Controlled usage

​Validation

​Disabled hint text

​Markdown in labels

​Hide the label

​Testing

​DateFieldYearless Props

​Additional field props

​DateFieldYearlessChange

Anatomy

Options

Date Format Modes

Sizes

Date Picker

Behavior

Visual States

Date Picker Interaction

Validation

Usage Guidelines

Alternatives

Date Field Yearless vs Date Field Single

How to Use

Labeling and Yearless Context

Anti-pattern: Ambiguous Context and Mixed Patterns

Content

Keyboard Interaction

Input Field

Date Picker

Accessibility

Code

Common Examples

Default values

Controlled usage

Validation

Disabled hint text

Markdown in labels

Hide the label

Testing

`DateFieldYearless` Props

Additional field props

DateFieldYearlessChange