Skip to Content

date-picker

ui

A date picker component with calendar popover, supporting single date and date range selection.

Use cases

  • Form fields requiring date input
  • Event scheduling and booking flows
  • Report date range selection
  • Birthday and anniversary inputs
  • Filter panels with date constraints

Features

  • Single date selection (DatePicker)
  • Date range selection (DateRangePicker) with two-month calendar
  • Popover-based calendar with keyboard navigation
  • Customizable date format via date-fns
  • Controlled and uncontrolled modes
  • Composes Calendar, Popover, and Button primitives

Preview

Interactive preview with light/dark mode toggle. Switch to Code tab to view the full source.

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/date-picker

Dependencies

date-fnslucide-reactbuttoncalendarpopover

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/date-picker

Source

components/ui/date-picker.tsx