> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# DatePicker
> A calendar date picker supporting single-date and date-range selection with optional side-by-side month display and footer action buttons.
This subpath needs the optional `react-day-picker` peer dependency: `pnpm add react-day-picker`.
See [Subpath exports](/docs/ui/subpath-exports).
```tsx theme={null}
import { DatePicker } from "@fanvue/ui/date-picker";
import type {
DatePickerOwnProps,
DatePickerProps,
DatePickerVariant,
DateRange,
} from "@fanvue/ui/date-picker";
```
## Examples
## Default
```tsx theme={null}
import { useState } from "react";
import { DatePicker } from "@fanvue/ui/date-picker";
const DEFAULT_MONTH = new Date(2026, 1);
function Example() {
const [selected, setSelected] = useState();
return (
console.log("Applied:", selected)}
onCancel={() => setSelected(undefined)}
/>
);
}
```
## With Disabled Dates
```tsx theme={null}
import { useState } from "react";
import { DatePicker } from "@fanvue/ui/date-picker";
const DEFAULT_MONTH = new Date(2026, 1);
function Example() {
const [selected, setSelected] = useState();
return (
);
}
```
## Without Footer
```tsx theme={null}
import { useState } from "react";
import { DatePicker } from "@fanvue/ui/date-picker";
const DEFAULT_MONTH = new Date(2026, 1);
function Example() {
const [selected, setSelected] = useState();
return (
);
}
```
## Single Selection
```tsx theme={null}
import { useState } from "react";
import { DatePicker } from "@fanvue/ui/date-picker";
const DEFAULT_MONTH = new Date(2026, 1);
function Example() {
const [selected, setSelected] = useState(new Date(2026, 1, 15));
return (
console.log("Applied:", selected)}
onCancel={() => setSelected(undefined)}
/>
);
}
```
## Custom Labels
```tsx theme={null}
import { useState } from "react";
import { DatePicker } from "@fanvue/ui/date-picker";
const DEFAULT_MONTH = new Date(2026, 1);
function Example() {
const [selected, setSelected] = useState();
return (
console.log("Applied:", selected)}
onCancel={() => setSelected(undefined)}
/>
);
}
```
## Props
## DatePicker
A calendar date picker supporting single-date and date-range selection with optional side-by-side month display and footer action buttons.
Built on top of [react-day-picker](https://react-day-picker.js.org/) — all `DayPickerProps` (except `numberOfMonths`) are forwarded.
Label for the apply button.
Label for the cancel button.
Additional CSS class name for the outer container. Class name to add to the root element.
Callback fired when the Apply button is clicked.
Callback fired when the Cancel button is clicked.
Whether to render the cancel / apply footer buttons.
Display one month or two side-by-side.
## Exported types
Also exported from `@fanvue/ui/date-picker`: `DatePickerOwnProps`, `DatePickerProps`, `DatePickerVariant`, `DateRange`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming) · [Subpath exports](/docs/ui/subpath-exports)