## Installation [#installation]
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add @dotui/date-picker
```
```bash
pnpm dlx shadcn@latest add @dotui/date-picker
```
```bash
yarn dlx shadcn@latest add @dotui/date-picker
```
```bash
bun x shadcn@latest add @dotui/date-picker
```
## Usage [#usage]
Use date pickers to allow users to select a date using a field and a calendar popover.
```tsx
import { CalendarIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { DatePicker } from "@/components/ui/date-picker";
import { DialogContent } from "@/components/ui/dialog";
import { Label } from "@/components/ui/field";
import { DateInput, InputAddon, InputGroup } from "@/components/ui/input";
import { Overlay } from "@/components/ui/overlay";
```
```tsx
```
## Examples [#examples]
## API Reference [#api-reference]
### DatePicker [#datepicker]
### DateRangePicker [#daterangepicker]