randomseeds logo
Random Design System

Calendar

A date picker component for selecting dates. Built on react-day-picker.

Default

SuMoTuWeThFrSa

Usage

Use the Calendar for inline date selection. For a date picker triggered by an input, compose Calendar with a Popover.

Supports single date, date range, and multiple date selection modes.

Props

PropTypeDefaultDescription
mode"single" | "range" | "multiple""single"Selection mode
selectedDate | DateRange | Date[]Controlled selected value
onSelect(date) => voidCallback when selection changes
disabledMatcher | Matcher[]Dates to disable
showOutsideDaysbooleantrueShow days from adjacent months