ReUI
Components

Date Picker

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

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

Installation

pnpm dlx shadcn@latest add https://reui.io/r/date-picker.json

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