Skip to content
PatternFly logo

Date picker

A date picker helps users select a specific date, time, or range of time-related values.

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.

Demos

Date range picker

This is intended to be used as a filter. After selecting a start date, the next date is automatically selected.

to

Date and time range picker

to

Date and time pickers in modal

Modals trap focus and watch a few document level events. In order to place a date picker in a modal:

  • To avoid the modal's escape press event handler from overruling the date picker's escape press handlers, use the DatePickerRef to close the calendar when it is open and the escape key is pressed.
  • Append the calendar to the modal to keep it as close to the date picker in the DOM while maintaining correct layouts visually In order to place a time picker in the modal, its menu must be appended to the time picker's parent.

View source on GitHub