Date Picker

A button-triggered popover that opens a Calendar. Includes both single-date (DatePicker) and range (DateRangePicker) variants. The trigger displays the formatted selection.

Date Range Picker

Use DateRangePicker to select a start/end pair. The popover shows two months side by side.

Installation

Props

DateRangePicker accepts the same props except value is a { from, to } range object.

PropTypeDefaultDescription
value
Date—Controlled date value.
onChange
(date: Date | undefined) => void—Called when the user picks a date.
placeholder
string"Pick a date"Trigger placeholder when no date is selected.
dateFormat
string"PPP"date-fns format token used in the trigger label.
disabled
booleanfalseDisable the trigger.