pro-ui

DatePicker

Accessible date picker with calendar popover. Built on React Aria and @internationalized/date.

Import

import { DatePicker } from '@dangbt/pro-ui'

Basic usage

<DatePicker label="Start Date" />

Controlled

import { parseDate } from '@internationalized/date'
 
const [date, setDate] = useState(parseDate('2025-01-01'))
 
<DatePicker label="Due Date" value={date} onChange={setDate} />

With min/max

<DatePicker
  label="Appointment"
  minValue={today(getLocalTimeZone())}
  maxValue={parseDate('2025-12-31')}
/>

Props

PropTypeDefaultDescription
labelstring—Picker label
valueCalendarDate—Controlled date value
defaultValueCalendarDate—Uncontrolled default
onChange(date: CalendarDate) => void—Called on date selection
minValueCalendarDate—Minimum selectable date
maxValueCalendarDate—Maximum selectable date
isDisabledboolean—Disable the picker
errorMessagestring—Error state text

On this page