# Date Picker

A pill field that opens a month in a floating surface.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/date-picker
```

## Usage

```tsx
import { DatePicker } from '@/components/fetaui/date-picker'

export function Example() {
  return <DatePicker onValueChange={setDate} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| mode | single, range | single |
| value | Date or DateRange |  |
| defaultValue | Date or DateRange |  |
| onValueChange | (value) => void |  |
| presets | { label, days }[] | range only |
| placeholder | string | Pick a date |
| defaultMonth | Date |  |
| isDisabled | (date) => boolean |  |
| booked | Date[] |  |
| invalid | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |
| dropdowns | boolean | false |
| withTime | boolean | false |
| time, defaultTime | text, like 09:30 |  |
| onTimeChange | (time) => void |  |
| natural | boolean | false |

## When to use

- For a date or a range inside a form.

## When not to use

- When the month should always be visible: use Calendar.

## Accessibility

- The trigger reports aria-expanded and opens a labelled dialog.
- Focus returns to the field when a date is picked.

## Motion

- The month opens under the field in 180 ms.
- The field value crossfades.
- With reduced motion, the month appears at once.