# Date picker

Date picker is a neobrutalist React component from Cruise UI. A calendar (single day or a range) and a DD/MM/YYYY input that opens it in a popover.

Install (with the @cruiseui registry in components.json, see Installation):

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

Import: `import { CruiseDatePicker, CruiseCalendar } from "@/components/cruise/date-picker";`

## When to use

Delivery dates, bookings, date ranges for reports.

## When not to

Dates of birth (three plain inputs or a typed date are quicker).

## Example (React)

```tsx
"use client";

import { useState } from "react";
import type { DateRange } from "react-day-picker";
import { CruiseCalendar, CruiseDatePicker } from "@/components/cruise/date-picker";

export default function DatePickerExample() {
  const [range, setRange] = useState<DateRange | undefined>();
  return (
    <div className="flex flex-col gap-6">
      <div className="max-w-xs">
        <CruiseDatePicker label="Delivery date" hint="DD/MM/YYYY" disabledDays={(day) => day < new Date(new Date().toDateString())} />
      </div>
      <CruiseCalendar mode="range" selected={range} onSelect={setRange} disabled={{ dayOfWeek: [0] }} />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<table class="calendar-grid" role="grid" aria-label="October 2026">
  <thead><tr><th class="calendar-weekday" scope="col" abbr="Monday">Mo</th><!-- … --></tr></thead>
  <tbody>
    <tr>
      <td class="calendar-day calendar-today"><button type="button" class="calendar-day-button" aria-label="Today, Thursday, 15 October 2026">15</button></td>
      <td class="calendar-day calendar-selected"><button type="button" class="calendar-day-button" aria-label="Friday, 16 October 2026, selected" aria-pressed="true">16</button></td>
      <td class="calendar-day calendar-disabled"><button type="button" class="calendar-day-button" disabled aria-label="Sunday, 18 October 2026">18</button></td>
    </tr>
  </tbody>
</table>
```

## Props: CruiseDatePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label?` | `string` | — | Visible label. Leave out inside a CruiseFormField (it brings the label). |
| `hint?` | `string` | — | — |
| `error?` | `string` | — | — |
| `required?` | `boolean` | — | — |
| `value?` | `Date \| null` | — | — |
| `defaultValue?` | `Date \| null` | — | — |
| `onValueChange?` | `((date: Date \| null) => void)` | — | — |
| `format?` | `string` | `"DD/MM/YYYY"` | Display and typing format: DD, D, MM, M, YYYY (default DD/MM/YYYY). |
| `disabled?` | `boolean` | — | — |
| `disabledDays?` | `Matcher \| Matcher[]` | — | Days that can't be picked, e.g. { before: new Date() }. |
| `weekStartsOn?` | `0 \| 4 \| 6 \| 3 \| 2 \| 1 \| 5` | `1` | — |
| `name?` | `string` | — | — |
| `id?` | `string` | — | — |
| `className?` | `string` | — | — |

## Props: CruiseCalendar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled?` | `Matcher \| Matcher[]` | — | Days that can't be picked (react-day-picker matchers, e.g. { before: new Date() }). |
| `weekStartsOn?` | `0 \| 4 \| 6 \| 3 \| 2 \| 1 \| 5` | — | 1 = Monday (default), 0 = Sunday. |
| `defaultMonth?` | `Date` | — | The month shown first. |
| `autoFocus?` | `boolean` | — | Focus the selected day (or today) when it appears, e.g. inside a popover. |
| `className?` | `string` | — | — |
| `mode?` | `"single" \| "range"` | — | — |
| `selected?` | `Date \| DateRange` | — | — |
| `onSelect?` | `((date: Date \| undefined) => void) \| ((range: DateRange \| undefined) => void)` | — | — |

## Accessibility

- Arrow keys move by day, Page Up / Down by month, Home / End to the week's ends.
- Today, selected and disabled days are told apart by more than colour (outline, line-through).
- The input accepts typed dates; the calendar button says the chosen date.