'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
Dates and times
Type a date or pick it from a calendar, ranges, times, all in the person's locale and calendar.
Ant Design: DatePicker, RangePicker, TimePicker, Calendar
import { DatePicker, DateRangePicker, DateField, TimeField, Calendar, parseDate } from '@alea/ui';
Examples
DatePicker
Type it or pick it.
Launch dateWhen the plugin goes live
10172026
Range and limits
Weekends unavailable, nothing in the past.
Workshop days
mmddyyyy
mmddyyyy
DateField and TimeField
Segments people type into.
Birthday
mmddyyyy
Reminder
––––AM
24 hours
––––
Calendar
A calendar on its own.
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
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 |
Date and time
granularity="minute" adds the time to the same field; hourCycle sets 12 or 24 hours.
Publish at
102020260930
Props
DatePicker props
Type a date or pick it from a calendar (Ant's DatePicker).
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | Help text under the field. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Error text, shown when invalid. |
label | ReactNode | - | The visible label. |
DateRangePicker props
Type or pick a start and end date.
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | Help text under the field. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Error text, shown when invalid. |
label | ReactNode | - | The visible label. |
DateField props
Type a date segment by segment, in the person's locale format.
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | Help text under the field. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Error text, shown when invalid. |
label | ReactNode | - | The visible label. |
TimeField props
Type a time; 12 or 24 hours from the locale (hourCycle to force one).
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | Help text under the field. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Error text, shown when invalid. |
label | ReactNode | - | The visible label. |
Calendar props
A month to pick a date from. Arrow keys move by day, Page Up/Down by month.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Defines a string value that labels the current element. (React Aria) |
autoFocus | boolean | - | Whether to automatically focus the calendar when it mounts. (React Aria) |
children | ChildrenOrFunction<DisclosureGroupRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. (React Aria) |
className | ClassNameOrFunction<CalendarRenderProps<"single">> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria) |
defaultValue | string[] | - | The default value (uncontrolled). (React Aria) |
id | string | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). (React Aria) |
isDisabled | boolean | - | Whether the calendar is disabled. (React Aria) |
isInvalid | boolean | - | Whether the current selection is invalid according to application logic. (React Aria) |
isReadOnly | boolean | - | Whether the calendar value is immutable. (React Aria) |
maxValue | DateValue | null | - | The maximum allowed date that a user may select. (React Aria) |
minValue | DateValue | null | - | The minimum allowed date that a user may select. (React Aria) |
onChange | ((value: string[]) => void) | - | Handler that is called when the value changes. (React Aria) |
selectionMode | "single" | - | Whether single or multiple selection is enabled. (React Aria) |
style | StyleOrFunction<DisclosureGroupRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria) |
value | string[] | - | The current value (controlled). (React Aria) |
RangeCalendar props
A month to pick a start and end date from.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Defines a string value that labels the current element. (React Aria) |
autoFocus | boolean | - | Whether to automatically focus the calendar when it mounts. (React Aria) |
children | ChildrenOrFunction<DisclosureGroupRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. (React Aria) |
className | ClassNameOrFunction<CalendarRenderProps<"single">> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria) |
defaultValue | string[] | - | The default value (uncontrolled). (React Aria) |
id | string | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). (React Aria) |
isDisabled | boolean | - | Whether the calendar is disabled. (React Aria) |
isInvalid | boolean | - | Whether the current selection is invalid according to application logic. (React Aria) |
isReadOnly | boolean | - | Whether the calendar value is immutable. (React Aria) |
maxValue | DateValue | null | - | The maximum allowed date that a user may select. (React Aria) |
minValue | DateValue | null | - | The minimum allowed date that a user may select. (React Aria) |
onChange | ((value: string[]) => void) | - | Handler that is called when the value changes. (React Aria) |
style | StyleOrFunction<DisclosureGroupRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria) |
value | string[] | - | The current value (controlled). (React Aria) |
Accessibility
- Each part of a date is its own spin button, so dates are typed, not guessed.
- The calendar is a grid with day names; unavailable days are announced.
Keyboard
| Key | Does |
|---|---|
| Arrow Up / Down | Change the focused part |
| Typing | Fills the part |
| Arrow keys (calendar) | Move by day or week |
| Page Up / Down | Move by month |
Do and don't
Do
- Use minValue, maxValue and isDateUnavailable for real limits.
Don't
- Don't use a date picker for birthdays far in the past: DateField is quicker.