Date picker

A date picker allows users to either manually enter a date or select a date from a calendar.

Examples

Basic

Helper text

Select a date

Invalid

Error: Invalid date

Expanded

Calendar

Custom width input

Custom width input based on number of characters

Documentation

Usage

Class
Applied to
Outcome
.pf-v6-c-date-picker
<div>
Initiates the date picker component. Required
.pf-v6-c-date-picker__input
<div>
Initiates the date picker input container. Required
.pf-v6-c-date-picker__helper-text
<div>
Initiates the date picker helper text.
.pf-v6-c-date-picker__calendar
<div>
Initiates an optional date picker calendar container. Note: Required in the react date picker component.
.pf-m-top
.pf-v6-c-date-picker
Modifies to display the calendar above the date picker.
.pf-m-align-right
.pf-v6-c-date-picker__calendar
Modifies the calendar to align the calendar to the right edge of the date picker.
.pf-m-static
.pf-v6-c-date-picker__calendar
Modifies the calendar to be statically positioned to support custom positioning.