Date Picker

A calendar-based date selection control. Combines a trigger button with a popover calendar for intuitive date picking.

Basic

const [date, setDate] = useState<Date | undefined>(undefined)

<DatePicker
  date={date}
  onDateChange={setDate}
  placeholder="Select a date..."
/>

Direction

Month-navigation chevrons flip automatically so "previous month" points in the reading direction. Week start day is a locale concern, not a direction concern — Saturday-start vs. Sunday-start calendars are controlled by the calendar locale prop, not by dir.

API Reference

Prop	Type	Default	Description
`date`	`Date`	—	The controlled selected date.
`onDateChange`	`(date: Date \| undefined) => void`	—	Callback fired when the selected date changes.
`placeholder`	`string`	`"Pick a date"`	Placeholder text when no date is selected.