Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.
Examples
Props
TimePicker
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| aria-label | string | No | 'Time picker' | Accessible label for the time picker |
| className | string | No | '' | Additional classes added to the time picker. |
| defaultTime | string | No | '' | A time string. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format |
| delimiter | string | No | ':' | Character to display between the hour and minute |
| direction | 'up' | 'down' | No | 'down' | Flag specifying which direction the time picker menu expands |
| id | string | No | Id of the time picker | |
| invalidFormatErrorMessage | string | No | 'Invalid time format' | Error message to display when the time is provided in an invalid format. |
| is24Hour | boolean | No | false | True if the time is 24 hour time. False if the time is 12 hour time |
| isDisabled | boolean | No | false | Flag indicating the time picker is disabled |
| menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | No | '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, e?: any) => void | No | Optional event handler called each time the value in the time picker input changes. | |
| placeholder | string | No | 'hh:mm' | String to display in the empty time picker field as a hint for the expected time format |
| stepMinutes | number | No | 30 | Size of step between time options in minutes. |
| validateTime | (time: string) => boolean | No | Optional validator can be provided to override the internal time validator. | |
| width | string | No | 150 | Width of the time picker. |
CSS variables
View source on GitHub
