> ## 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 Range – Code
> A date range picker for selecting start and end dates without year, useful for recurring date ranges.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
;
}
};
```tsx lines expandable theme={null}
import { DateFieldYearlessRange } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
## Common Examples
```tsx theme={null}
import { DateFieldYearlessRange } from "@servicetitan/anvil2";
function ExampleComponent() {
return ;
}
```
### 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.
```tsx lines expandable theme={null}
import { DateFieldYearlessRange } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### Controlled
Use `value` and `onChange` for full control over the component state.
```tsx lines expandable theme={null}
import {
DateFieldYearlessRange,
type DateFieldYearlessRangeChange,
} from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [dateRange, setDateRange] = useState({
startDate: { month: 1, day: 1 },
endDate: { month: 12, day: 31 },
});
return (
);
}
export default App;
```
### Date Format Modes
The component supports two date format modes: `mm/dd` (default) and `dd/mm`.
```tsx lines expandable theme={null}
import { DateFieldYearlessRange, Flex } from "@servicetitan/anvil2";
function App() {
return (
{/** US format (default) */}
{/** International format */}
);
}
export default App;
```
### With Validation
Show error states when validation fails.
```tsx lines expandable theme={null}
import { DateFieldYearlessRange } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Sizes
The component supports `small`, `medium`, and `large` sizes.
```tsx lines expandable theme={null}
import { DateFieldYearlessRange, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Custom Labels
Customize the accessible labels for the start and end date fields.
```tsx lines expandable theme={null}
import { DateFieldYearlessRange } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## 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](/docs/accessibility/labels-and-ctas#input-field-context-association).
### 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 { DateFieldYearlessRange, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Hide the label
Use `hideLabel` to visually hide the label. The `label` string is kept as a screen-reader-only `
```tsx theme={null}
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 for the field. Supports inline markdown formatting.
Default value for uncontrolled usage. Object with `startDate` and `endDate` properties, each containing `month` and `day` numbers.
Helper text displayed below the input.
Whether the field is disabled.
Whether to hide the format hint (e.g., "Format: mm/dd").
Whether to disable the date picker popup.
Accessible label for the end date input (visually hidden).
Error message or error state for the field.
The `aria-live` value for error messages.
Visually hides the label while keeping it accessible to screen readers.
Custom ID for the field.
`}>
Additional props to pass to the legend [FieldLabel](/docs/web/components/field-label/code) component. Supports the `aiMark` prop for displaying [AI-powered field indicators](/docs/web/utilities/ai-marks).
The date format mode.
Additional information to display in a tooltip next to the label.
Callback when the field loses focus.
Callback when the date range value changes.
Callback when the field receives focus.
Whether the field is required.
The size of the input fields.
Accessible label for the start date input (visually hidden).
Controlled value. Object with `startDate` and `endDate` properties, each containing `month` and `day` numbers or `null`.
### Types
```tsx theme={null}
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;
};
```
