Date and time picker

A date and time picker helps users select both a specific date and a time by combining date picker and time picker components.

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. To learn more about the process, visit our about page or our Beta components page on GitHub.


In this demo, learn how to use a CalendarMonth component and a Dropdown component to compose a simple DateTimePicker. The input is read only, meaning that the following example does not cover pasting a copied date and time. Also, you can pick the time only from the predefined options and cannot change it in the input.

Date and time picker

Date and time range picker


View source on GitHub