;
}
};
```tsx lines expandable theme={null}
import { DateFieldRange } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
## Common Examples
```tsx theme={null}
import { DateFieldRange } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
);
}
```
### Default values
Default values can be included in `DateFieldRange` to use the field in an uncontrolled mode.
```tsx lines expandable theme={null}
import { DateFieldRange } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Controlled usage
The `DateFieldRange` can be controlled. This means you can maintain the state outside the component. Listen for new dates with `onChange` and supply dates into the `value` prop.
```tsx lines expandable theme={null}
import {
DateFieldRange,
Flex,
Button,
type DateFieldRangeValue,
} from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [value, setValue] = useState();
const today = new Date();
const plus5days = new Date();
plus5days.setDate(today.getDate() + 5);
const valueToSet = {
startDate: today.toISOString(),
endDate: plus5days.toISOString(),
};
return (
setValue({ startDate: change.startDate, endDate: change.endDate })
}
/>
);
}
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 { DateFieldRange } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
### Timezone
The `timezone` prop controls the meaning of the "Today" button and which month-year the calendar initially displays. When the timezone differs from the user's locale, a disambiguation message appears below the calendar.
```tsx lines expandable theme={null}
import { DateFieldRange } from "@servicetitan/anvil2";
import { useState } from "react";
import type { DateFieldRangeValue } from "@servicetitan/anvil2";
function App() {
const [value, setValue] = useState(null);
return (
setValue({ startDate: change.startDate, endDate: change.endDate })
}
/>
);
}
export default App;
```
### Disable calendar popover
The display of the `Calendar` can be prevented by passing `disableCalendar`.
```tsx lines expandable theme={null}
import { DateFieldRange } 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 { DateFieldRange, 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 { DateFieldRange } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
```tsx theme={null}
import { DateFieldRange } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
); }
```
## `DateFieldRange` Props
Uncontrolled initial value for the date range.
Callback fired when the value changes.
Controlled value for the date range (ISO 8601 strings)
If true, disables the calendar popover.
If true, disables the format hint below the field.
Maximum selectable date (ISO 8601).
Minimum selectable date (ISO 8601).
Date input format.
If true, the field is required.
IANA timezone identifier (e.g., "America/Los\_Angeles"). Controls the "Today" button behavior and initial calendar display. Shows a disambiguation message when different from the user's locale timezone.
Dates or days of week that are unavailable for selection.
### Additional field props
The `DateFieldRange` also supports 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.
## DateFieldRangeChange
The following object is passed back to you in the `onChange` handler.
The end date in ISO 8601 format. Example: "2025-07-02".
Whether the start and end dates are valid according to the constraints
(required, unavailable dates/days, min/max date).
Whether the input field is empty.
Whether the input field contains two parsable dates. This is not the same as
the date range being valid.
The start date in ISO 8601 format. Example: "2025-03-22".
