Date Picker

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add date-picker

Usage#

import { DatePicker } from "@/components/ui/date-picker"

export function Example() {
  const [date, setDate] = React.useState<Date>()
  return <DatePicker value={date} onChange={setDate} />
}

Calendar#

The Calendar is the standalone grid the pickers wrap. Use it directly when you need an always-open calendar. The caption cycles day → month → year views; arrow keys move the focused day, PageUp/PageDown move a month, Home/End jump to the week edges.

Range selection#

Set mode="range" to select a { from, to } span. The first click sets the start, the second closes the range; hovering previews the span. Show multiple months with numberOfMonths.

Presets#

Pass presets to render a quick-pick rail. Use presets (boolean) for the built-in set, or pass your own array. The single-date set ships getDatePresets(); the range set ships getDateRangePresets() with eleven common spans (Today, Last 7 days, This month, Last year, …).

Range with presets#

The combination most analytics surfaces want: a two-month range picker with the full preset rail.

Sizes#

Constraints#

Bound the range with min / max, or disable arbitrary days with isDateDisabled. Disabled days are inert and struck through.

Density#

Like the rest of Koala, the calendar honors density: compact tightens cells and controls for dense application UI.

Inside a Field#

Drop a picker inside a Field and it auto-wires the label, hint, id, and error/disabled state, with no manual props.

FAQ#