> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Date Field Yearless – Design
> A form field for selecting dates without year information, useful for recurring dates.
export const DoDont = ({text, type, children}) => {
return <>
{type === "do" &&
## Anatomy
Date Field Yearless consists of five primary elements that enable users to select a month and day without year information.
1. **Label** - Identifies the field and its purpose
2. **Input field** - Text input for manual month and day entry with format mask
3. **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
```tsx lines theme={null}
import { DateFieldYearless, Flex } from "@servicetitan/anvil2";
function App() {
return (
{/** US format (default) */}
{/** International format */}
);
}
export default App;
```
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
```tsx lines theme={null}
import { DateFieldYearless, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
Three size options accommodate different layout densities and visual hierarchies.
| Size | Height |
| ------ | ------ |
| Small | 32px |
| Medium | 40px |
| Large | 48px |
### Date Picker
```tsx lines theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
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
```tsx lines theme={null}
import { DateFieldYearless, Grid } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
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
```tsx lines theme={null}
import {
DateFieldYearless,
Flex,
type YearlessDate,
type DateFieldYearlessChange,
} from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [value, setValue] = useState();
const [latestEvent, setLatestEvent] = useState();
const [errorMessage, setErrorMessage] = useState("");
const handleChange = (change: DateFieldYearlessChange) => {
setValue(change.value);
setLatestEvent(change);
if (change.isValid) setErrorMessage("");
};
const handleBlur = () => {
if (!latestEvent) return;
if (!latestEvent.isValid) return setErrorMessage("Invalid date");
if (!latestEvent.isInputValid && !latestEvent.isInputEmpty)
return setErrorMessage("Valid date, but input isn't fully filled");
};
return (
{JSON.stringify(latestEvent, null, 2)}
);
}
export default App;
```
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
### When to Use
Use Date Field Yearless when you need to:
* Capture recurring dates where year is irrelevant
* Select template dates for annual events
* Input birthdays or anniversaries
* Create seasonal date selections
### When not to use
Avoid using Date Field Yearless for:
* **Specific dates with year** - Use [Date Field Single](/docs/web/components/date-field-single/design) instead
* **Date ranges** - Use [Date Field Range](/docs/web/components/date-field-range/design) or [Date Field Yearless Range](/docs/web/components/date-field-yearless-range/design) instead
* **Time selection** - Use [Time Field](/docs/web/components/time-field/design) for time-only inputs
### 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.
```tsx lines theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
* 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.
```tsx lines theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
* 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](/docs/accessibility/labels-and-ctas#input-field-context-association).
