Time Picker
A composable time picker: hour, minute, second and AM/PM columns, in a popover or in place.
Overview
- Layouts: in a popover (
TimePickerTrigger+TimePickerContent), behind a typable field (TimePickerInput, which reads930,14h30,2:30 pm…) or in place (TimePickerPanel).<TimePicker />alone renders a trigger and a popover. - Value:
@internationalized/dateTimeobjects (value/defaultValue/onChange,nullwhen empty). - Columns:
hourCycle,granularityandperiodPositionshape them. - Choices:
hourStep/minuteStep/secondStep,minValue/maxValue(an overnight window when min > max) andisTimeUnavailablenarrow them, and a pick moves to the nearest selectable time. - `requireConfirm`: keeps picks as a draft until OK.
- Keyboard: each column is an
aria-activedescendantlistbox — arrows, Home/End, PageUp/PageDown and typed digits pick, Left/Right move between columns, Enter commits and closes. - Forms:
namesubmitsHH:mm(orHH:mm:ss) with a native form;isRequired,isInvalid,isReadOnlyandisDisabledwork as in react-aria. - `useTimePicker()`: exposes the state inside a picker.
Every string comes from i18n.
Installation
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
Files land in
components/fma-ds/time-picker.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- @internationalized/date@^3.12.4cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1