Date Picker
A button-triggered date picker popover built on Calendar and Base UI Popover. Supports single, range, and multiple selection, preset shortcuts, stacked or sidebar preset layouts, footer slot, and min/max constraints.
Playground
Installation
pnpm add @tessinaui/ui react-day-pickerUsage
import { DatePicker, createRangePresets } from "@tessinaui/ui";{/* Single date */}
<DatePicker mode="single" selected={date} onSelect={setDate} />
{/* Date + time range footer */}
<DatePicker
mode="range"
selected={range}
onSelect={setRange}
showDateTime
showTimezone
/>
{/* Date range with presets sidebar */}
<DatePicker
mode="range"
selected={range}
onSelect={setRange}
presets={createRangePresets()}
presetsPosition="left"
numberOfMonths={2}
/>Examples
Default
A single date picker with a calendar icon trigger.
Range
Range selection with two months shown side by side.
Presets
Preset shortcuts in a left sidebar for quick range selection.
Date & time
Built-in start/end date and time inputs with a timezone selector.
Sizes
Calendar cell density across sm, md, and lg.
Loading
Skeleton placeholders shown while the picker initialises.
API Reference
DatePicker props
Selection
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "range" | "multiple" | "single" | Selection mode |
selected | Date | DateRange | Date[] | — | Controlled selection value |
onSelect | (value) => void | — | Called when selection changes |
Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Pick a date" | Label shown when nothing is selected |
triggerVariant | ButtonProps["variant"] | "outline" | Trigger button variant |
triggerSize | ButtonProps["size"] | follows size | Trigger button size override |
triggerClassName | string | — | Extra classes for the trigger (e.g. "w-56") |
Calendar options
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Calendar cell size |
numberOfMonths | number | 1 | Months shown inside the popover |
showWeekNumber | boolean | false | Show ISO week numbers |
showOutsideDays | boolean | true | Show adjacent month days |
fixedWeeks | boolean | false | Always render 6 rows |
fromDate | Date | — | Earliest selectable date |
toDate | Date | — | Latest selectable date |
disabled | Matcher | Matcher[] | — | Disable specific dates |
defaultMonth | Date | — | Default visible month |
Date & time
| Prop | Type | Default | Description |
|---|---|---|---|
showDateTime | boolean | false | Show built-in Start/End date and time inputs below the calendar — the date fields accept typed dates and commit straight into the selection |
showTimezone | boolean | false | Show a timezone selector below the date/time inputs |
Presets
| Prop | Type | Default | Description |
|---|---|---|---|
presets | PresetItem[] | — | List of preset shortcuts |
presetsPosition | "left" | "top" | "left" | "left" renders a sidebar; "top" renders pill chips above the calendar |
Layout
| Prop | Type | Default | Description |
|---|---|---|---|
footer | ReactNode | — | Slot rendered below the calendar (e.g. apply/clear buttons) |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "full" | "lg" | Popover border radius |
align | "start" | "center" | "end" | "center" | Popover horizontal alignment relative to trigger |
side | "bottom" | "top" | "left" | "right" | "bottom" | Popover side |
dir | "ltr" | "rtl" | "ltr" | Text direction — RTL flips nav arrows and calendar layout |
className | string | — | Added to the outer wrapper <div> |
PresetItem type
interface PresetItem {
label: string;
getValue: () => Date | DateRange;
}Built-in preset helpers
import { createSinglePresets, createRangePresets } from "@tessinaui/ui";
// Single: Today, Yesterday, Last week
const singlePresets = createSinglePresets();
// Range: Today, Yesterday, Last 7 days, Last 30 days, Last 3 months
const rangePresets = createRangePresets();DateRange type
import type { DateRange } from "@tessinaui/ui";
interface DateRange {
from: Date | undefined;
to?: Date | undefined;
}ContextMenu
A right-click / long-press menu anchored at the cursor. Built on Base UI's context-menu primitive — supports items, groups, labels, separators, sub-menus, checkbox-items, and radio-items. Compound API mirrors DropdownMenu so you can swap one for the other when the trigger gesture changes from click to right-click.
Divider
A thin line that separates content. Horizontal or vertical, solid / dashed / dotted, five thickness sizes, tonal colours, optional inline label, and RTL support.