Date Picker
thilo composition
2 types
Calendar + Popover + Button. Two variants: single date and date range.
@/components/ui/date-pickerTypes
| Type | Preview | Usage |
|---|---|---|
| DatePicker | Due date, created date, single-value date fields in forms | |
| DateRangePicker | Date filters, report period selection, leave requests |
States
| State | Preview | Token |
|---|---|---|
| Empty | Placeholder text — text-muted-foreground | |
| Selected | Shows formatted date — text-foreground | |
| Disabled | opacity-50 pointer-events-none |
In context — ticket form + filter bar
New ticket
Tickets
Showing all tickets — no date filter active
Props — DatePicker
| Prop | Type | Description |
|---|---|---|
| value | Date | undefined | Controlled selected date |
| onChange | (date: Date | undefined) => void | Called when the user picks a date |
| placeholder | string | Trigger button text when nothing is selected |
| disabled | boolean | Prevents opening — opacity-50 |
Props — DateRangePicker
| Prop | Type | Description |
|---|---|---|
| value | { from?: Date; to?: Date } | undefined | Controlled date range |
| onChange | (range: ...) => void | Called on each selection change |
| placeholder | string | Trigger text when no range selected |
Built from Calendar + Popover. For the raw calendar see the Calendar page.
On this page