ReUI
Components

Date Picker

A date input component that combines a calendar popover with an input field.

@radix-ui/react-popoverreact-day-picker

Installation

Install ReUI

Refer to the Installation Guide for detailed instructions on setting up ReUI dependencies in your project.

Install dependencies

npm install @radix-ui/react-popover react-day-picker date-fns

Add required components

Add Button and Popover components used by ReUI Date Picker.

Examples

Default

Loading

Range

Loading

Presets

Loading

Form

Loading

API Reference

This component is built using react-day-picker and Radix UI Popover primitives. For detailed information about the calendar functionality, please visit the react-day-picker documentation.

Calendar

This component is based on the DayPicker component from react-day-picker. For all available props, refer to the react-day-picker documentation. The component includes the following custom styling props:

PropTypeDefault
className stringundefined
classNames objectSee calendar.tsx

DatePickerTrigger

The trigger button that opens the date picker popover.

PropTypeDefault
asInput booleanfalse
placeholder string"Pick a date"
className stringundefined

DatePickerContent

The popover content that contains the calendar. This component extends Radix UI's Popover.Content.

PropTypeDefault
className stringundefined
align enum "center"

DatePickerPresets

A component for displaying preset date ranges.

PropTypeDefault
presets Array<{ label: string; range: DateRange }>
onSelect (range: DateRange) => void
className stringundefined
PreviouseData GridNextDialog