dr-ui
Components

Date Picker

An input that opens a calendar popover for selecting a date

Installation

npx shadcn@latest add @dr-ui/date-picker

Registry dependencies

@dr-ui/calendar
@dr-ui/input
@dr-ui/popover
@dr-ui/utils
@dr-ui/i18n
@dr-ui/time-picker

Dependencies

date-fns@^4.1.0
lucide-react@^1.7.0

Basic

A date picker with a calendar popover for single-date selection.

Validity states

Show error, success, or warning state with an inline message and matching border color.

This is some additional helper text

Error message

This is some additional helper text

Success message

This is some additional helper text

Warning message

With time

Enable time selection with the showTime prop. Click the time bar to switch to the time picker view.