Examples
Appending the TimePicker to the document.body may cause accessibility issues, including being unable to navigate into the menu via keyboard or other assistive technologies. Instead, appending to the "parent" is recommended.
Minimum/maximum times
The minTime/maxTime props restrict the options shown for the user to select from as well as trigger the invalidMinMaxErrorMessage if the user enters a time outside this range.
Props
TimePicker
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Time picker' | Accessible label for the time picker |
| className | string | '' | Additional classes added to the time picker. |
| delimiter | string | ':' | Character to display between the hour and minute |
| id | string | Id of the time picker | |
| includeSeconds | boolean | Includes number of seconds with the chosen time and allows users to manually edit the seconds value. | |
| inputProps | TextInputProps | {} | Additional props for input field |
| invalidFormatErrorMessage | string | 'Invalid time format' | Error message to display when the time is provided in an invalid format. |
| invalidMinMaxErrorMessage | string | 'Invalid time entered' | Error message to display when the time provided is not within the minTime/maxTime constriants |
| is24Hour | boolean | false | True if the time is 24 hour time. False if the time is 12 hour time |
| isDisabled | boolean | false | Flag indicating the time picker is disabled |
| isOpen | boolean | false | Flag to control the opened state of the time picker menu |
| maxTime | string | Date | '' | A time string indicating the maximum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format |
| menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | 'parent' | 'inline' | The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')} |
| minTime | string | Date | '' | A time string indicating the minimum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format |
| onChange | ( event: React.FormEvent<HTMLInputElement>, time: string, hour?: number, minute?: number, seconds?: number, isValid?: boolean ) => void | Optional event handler called each time the value in the time picker input changes. | |
| placeholder | string | 'hh:mm' | String to display in the empty time picker field as a hint for the expected time format |
| setIsOpen | (isOpen?: boolean) => void | () => {} | Handler invoked each time the open state of time picker updates |
| stepMinutes | number | 30 | Size of step between time options in minutes. |
| time | string | Date | '' | A time string. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format |
| validateTime | (time: string) => boolean | Optional validator can be provided to override the internal time validator. | |
| width | string | '150px' | Width of the time picker. |
| zIndex | number | 9999 | z-index of the time picker |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|
