# Date Picker (/forms/date-picker)





<ComponentPreview name="date-picker-preskok-demo" description="A date picker with input and calendar overlay." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/date-picker
```

## Usage [#usage]

```tsx
import { parseDate } from "@internationalized/date"

import {
  DatePicker,
  DatePickerTrigger,
} from "@/components/ui/preskok-ui/date-picker"
import { Label } from "@/components/ui/preskok-ui/field"

export function Example() {
  return (
    <DatePicker defaultValue={parseDate("2024-01-20")}>
      <Label>Pick a date</Label>
      <DatePickerTrigger />
    </DatePicker>
  )
}
```

## Props [#props]

* **popover**: `PopoverProps` (without children) — Desktop overlay options.
* Inherits all `react-aria-components` `DatePicker` props.
* Compose field content using `Label`, `DatePickerTrigger`, and optional `FieldError`.

## Features [#features]

* **Responsive overlay**: popover on desktop, modal on mobile
* **Keyboard and screen reader support**
* **Validation and error messaging**

## Examples [#examples]

### Basic [#basic]

<ComponentPreview name="date-picker-preskok-demo" description="Pick a date using an input and calendar overlay." />

### Controlled [#controlled]

<ComponentPreview name="date-picker-controlled-preskok-demo" description="Control picker state and display the selected date." />

### Disabled [#disabled]

<ComponentPreview name="date-picker-disabled-preskok-demo" description="Show a disabled date picker with a read-only value." />

### Validation [#validation]

<ComponentPreview name="date-picker-validation-preskok-demo" description="Validate date input with constraints and inline errors." />