Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.
Examples
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 |
| direction | 'up' | 'down' | 'down' | Flag specifying which direction the time picker menu expands |
| id | string | Id of the time picker | |
| 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. |
| 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 |
| menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | '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={() => document.body} menuAppendTo={document.getElementById('target')} |
| onChange | (time: string, hour?: number, minute?: 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 |
| 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 | 150 | Width of the time picker. |
CSS variables
View source on GitHub
