;
}
};
```tsx lines expandable theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
## Common Examples
```tsx theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function ExampleComponent() {
return ;
}
```
### Default values
Default values can be included in `DateFieldYearless` to use the field in an uncontrolled mode.
```tsx lines expandable theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
## 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.
```tsx lines expandable theme={null}
import {
DateFieldYearless,
Flex,
Button,
type YearlessDate,
} from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [value, setValue] = useState();
return (
setValue(change.value)}
/>
);
}
export default App;
```
### 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.
```tsx lines expandable 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;
```
### 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.
```tsx lines expandable theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
### Markdown in labels
The `label` prop supports inline markdown: bold (`**text**`), italic (`*text*`), bold and italic (`***text***`), highlight (`==text==`), and code (`` `text` ``).
```tsx lines expandable theme={null}
import { DateFieldYearless, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
```tsx theme={null}
import { DateFieldYearless } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
); }
```
## `DateFieldYearless` Props
Uncontrolled initial value for the yearless date.
Callback fired when the value changes.
Controlled value for the yearless date.
If true, disables the format hint below the field.
Maximum selectable yearless date.
Minimum selectable yearless date.
Date input format (yearless).
If true, the field is required.
Yearless dates that are unavailable for selection.
### Additional field props
The `DateFieldYearless` also support the following props which are common to most field components:
Additional description below the field.
If true, disables the field.
Error message or state.
ARIA live region setting for error messages.
Visually hides the label while keeping it accessible to screen readers via `aria-label`.
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](/docs/web/components/field-label/code) component. Supports the `aiMark` prop for displaying [AI-powered field indicators](/docs/web/utilities/ai-marks).
If true, shows a loading spinner.
Additional info icon or content for the label.
Placeholder text.
Input size.
Suffix element to display inside the input.
Input type.
## DateFieldYearlessChange
The `onChange` callback receives a DateFieldYearlessChange object with the following properties:
Whether the input is empty.
Whether the input matches the format and is not empty.
Whether the year-less date is valid according to all constraints (required,
unavailable dates, min/max date, etc.).
The year-less date as an object with keys day and month.
