TimePicker.md

id	section	subsection	cssPrefix	propComponents	beta
Time picker	components	date-and-time	pf-v5-c-time-picker	TimePicker	true

import { TimePicker } from '@patternfly/react-core';

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.

Basic 12 hour

Basic 24 hour

Custom delimiter

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.

With seconds

Basic 24 hours with seconds