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 go to our Beta components page on GitHub.
Examples
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__input--c-form-control--Width | calc(10 * 1ch + calc(2rem + 0.5rem)) | |
| .pf-c-date-picker | --pf-c-date-picker__input--c-form-control--width-base | calc(2rem + 0.5rem) | |
| .pf-c-date-picker | --pf-c-date-picker__input--c-form-control--width-chars | 10 | |
| .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
