edbnedbn/uibeta
ComponentsTablesChartsPDFs
GitHub stars
Explorer
    • Welcome
    • Principles
    • Accordion
    • Alert
    • Alert Dialog
    • Aspect Ratio
    • Attachment
    • Avatar
    • Badge
    • Breadcrumb
    • Bubble
    • Button
    • Button Group
    • Calendar
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Collapsible
    • Combobox
    • Command
    • Context Menu
    • Data Table
    • Date Picker
    • Basic
    • Range
    • Date of Birth
    • Input
    • Time
    • Natural Language
    • RTL
    • Dialog
    • Direction
    • Drawer
    • Dropdown Menu
    • Empty
    • Field
    • Form
    • Bug Report
    • Select
    • Checkbox Group
    • Radio Group
    • Switch
    • Complex Form
    • Array Fields
    • Hover Card
    • Input
    • Input Group
    • Input Otp
    • Item
    • Kbd
    • Label
    • Marker
    • Menubar
    • Message
    • Message Scroller
    • Native Select
    • Navigation Menu
    • Pagination
    • Popover
    • Progress
    • Questionnaire
    • Radio Group
    • Resizable
    • Scroll Area
    • Select
    • Separator
    • Sheet
    • Sidebar
    • Skeleton
    • Slider
    • Sonner
    • Spinner
    • Switch
    • Table
    • Tabs
    • Textarea
    • Toast
    • Toggle
    • Toggle Group
    • Tooltip
    • Typeset
    • Documentation
    • Reading
    • Chat / Streaming
    • Element Coverage

Composition recipe

Date Picker

Compose Calendar and Popover for controlled dates, ranges, typed input, time, and natural language.

Calendar + Popovershadcn reference

Installation

Components

npx shadcn@4.19.0 add https://ui.edbn.me/r/button.json https://ui.edbn.me/r/calendar.json https://ui.edbn.me/r/popover.json https://ui.edbn.me/r/field.json https://ui.edbn.me/r/input.json https://ui.edbn.me/r/input-group.json https://ui.edbn.me/r/select.json

Date libraries

npm install date-fns react-day-picker chrono-node

Source

Dependencies

Packages3

  • react-day-picker
  • date-fns
  • chrono-node

Registry items7

  • button
  • calendar
  • popover
  • field
  • input
  • input-group
  • select

Documentation

Composition

Date Picker is a Calendar rendered inside Popover. The trigger shows the formatted value, the feature owns the selected date, and Base UI manages popup focus and focus return.

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger render={<Button variant="outline" />}>
    {date ? format(date, "PPP") : "Pick a date"}
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar mode="single" selected={date} onSelect={setDate} autoFocus />
  </PopoverContent>
</Popover>

Controlled values and formatting

Store Date | undefined for a single selection and DateRange | undefined for a range. Format only at the UI boundary; convert to the application’s transport format when saving.

A date without a time zone is not an instant. Decide whether the feature represents a calendar date, local date and time, or UTC time before serializing it.

Input, time, and natural language

  • Input keeps typed text and the calendar selection synchronized.
  • Time combines the date with a labeled native time input.
  • Natural Language uses Chrono only at the parsing boundary.
  • Date of Birth limits future dates and exposes month and year selectors.

Keyboard and focus

  • The trigger has a visible label or a complete accessible name.
  • Arrow keys navigate days; Escape closes the popup.
  • After selection or dismissal, focus returns to the trigger.
  • The RTL example sets both direction and locale.

See the underlying Calendar and Popover docs for their full interaction contracts.