Patternfly Logo

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

Class
Applied to
Outcome
.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-picker
Modifies to display the calendar above the date picker.
.pf-m-error
.pf-c-date-picker__helper-text
Modifies the helper text for the invalid/error state.
.pf-m-align-right
.pf-c-date-picker__calendar
Modifies the calendar to align the calendar to the right edge of the date picker.

CSS variables

.pf-c-date-picker--pf-c-date-picker--m-top__calendar--Top
0
.pf-c-date-picker--pf-c-date-picker--m-top__calendar--TranslateY
calc(-100% - 0.25rem)
.pf-c-date-picker--pf-c-date-picker__helper-text--MarginTop
0.25rem
.pf-c-date-picker--pf-c-date-picker__helper-text--FontSize
0.875rem
.pf-c-date-picker--pf-c-date-picker__helper-text--Color
#151515
.pf-c-date-picker--pf-c-date-picker__helper-text--m-error--Color
#c9190b
.pf-c-date-picker--pf-c-date-picker__calendar--BackgroundColor
#fff
.pf-c-date-picker--pf-c-date-picker__calendar--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-date-picker--pf-c-date-picker__calendar--ZIndex
200
.pf-c-date-picker--pf-c-date-picker__calendar--Top
calc(100% + 0.25rem)
.pf-c-date-picker--pf-c-date-picker__calendar--Right
auto
.pf-c-date-picker--pf-c-date-picker__calendar--Left
0
.pf-c-date-picker--pf-c-date-picker__calendar--m-align-right--Right
0
.pf-c-date-picker--pf-c-date-picker__calendar--m-align-right--Left
auto
.pf-c-date-picker__helper-text.pf-m-error--pf-c-date-picker__helper-text--Color
#c9190b
.pf-c-date-picker__calendar.pf-m-align-right--pf-c-date-picker__calendar--Right
0
.pf-c-date-picker__calendar.pf-m-align-right--pf-c-date-picker__calendar--Left
auto
.pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar--pf-c-date-picker__calendar--Top
0

View source on GitHub