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 it with npx shadcn@latest add @cruiseui/date-picker.
Install
Terminal
npx shadcn@latest add @cruiseui/date-pickerFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
DD/MM/YYYY
"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>
);
}
<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>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
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).
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 | — | — |
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.