Date Picker
Input field with calendar popup for selecting dates
The date picker is a trigger button that opens a calendar popover for choosing a single date. Use it for due dates, birthdays, and any form field that needs one date.
To select a start and end date together, use DateRangePicker instead.
Preview
Installation
Usage
Examples
Controlled
Pass value and onSelect to manage the selected date externally.
Selected date: None
Custom Placeholder and Format
Use placeholder and format to set the empty-state text and the displayed date format.
Different Widths
Set a width utility via className to size the trigger.
Disabled State
Set disabled to prevent opening the picker.
Accessibility
The trigger opens a calendar popover that traps focus while open. Inside the calendar, use the arrow keys to move between days, PageUp and PageDown to change months, Enter or Space to select, and Escape to close.
API Reference
The DatePicker composes Calendar inside a Popover, with a Button trigger. It exposes its own props rather than forwarding to the underlying parts.
Props
DatePicker
Trigger button that opens a single-date calendar popover.