Date Picker

@allem-ui/date-picker

Calendar, date picker, date range picker, and time field components built on React Aria for full accessibility.

Installation

npm install @allem-ui/date-picker

Components

Calendar

Standalone month calendar with day selection, month/year navigation, and keyboard support.

May 2026

26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6

DatePicker

Input field with a popover calendar for selecting a single date.

Date of birth

DateRangePicker

Two date inputs with a range calendar for selecting start and end dates.

Trip dates

TimeField

Time input for hour, minute, and AM/PM selection.

Event time
––––AM

Date Utilities

The package re-exports key types and utilities from @internationalized/date:

CalendarDate, CalendarDateTime, Time,
ZonedDateTime, today, now, getLocalTimeZone,
parseDate, parseDateTime, parseTime

Props

PropTypeDefaultDescription
labelstring—Label text above the input
descriptionstring—Help text below the input
errorMessagestring—Error message shown in red
classNamestring—Additional CSS classes

DatePicker Props

PropTypeDefaultDescription
labelstring—Field label
descriptionstring—Helper text
errorMessagestring—Error message
classNamestring—Additional CSS classes

DateRangePicker Props

PropTypeDefaultDescription
labelstring—Field label
descriptionstring—Helper text
errorMessagestring—Error message
classNamestring—Additional CSS classes

TimeField Props

PropTypeDefaultDescription
labelstring—Field label
descriptionstring—Helper text
errorMessagestring—Error message
classNamestring—Additional CSS classes

All components extend their corresponding React Aria props for full accessibility and controlled/uncontrolled usage.