Patternfly Logo

Date picker

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

Basic

Helper text

Select a date.

Invalid

Invalid date selected.

Expanded

Calendar

Documentation

Usage

ClassApplied toOutcome
.pf-c-date-picker<div>Initiates the date picker component. Required
.pf-c-date-picker__input<div>Initiates the date picker input container. Required
.pf-c-date-picker__helper-text<div>Initiates the date picker helper text.
.pf-c-date-picker__calendar<div>Initiates an optional date picker calendar container. Note: Required in the react date picker component.
.pf-m-top.pf-c-date-pickerModifies to display the calendar above the date picker.
.pf-m-error.pf-c-date-picker__helper-textModifies the helper text for the invalid/error state.
.pf-m-align-right.pf-c-date-picker__calendarModifies the calendar to align the calendar to the right edge of the date picker.

CSS variables


View source on Github