Date picker

A date picker helps users enter or select a specific date from a calendar.

Examples

Basic

Helper text

Select a date.

Invalid

Invalid date

Expanded

Calendar

Custom width input

Custom width input based on number of characters

Documentation

Usage

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

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-date-picker	--pf-v5-c-date-picker--m-top__calendar--Top	0
	.pf-v5-c-date-picker	--pf-v5-c-date-picker--m-top__calendar--TranslateY	calc(-100% - 0.25rem)
--pf-v5-c-date-picker--m-top__calendar--TranslateY calc(-100% - --pf-v5-global--spacer--xs) calc(-100% - $pf-v5-global--spacer--xs) calc(-100% - pf-size-prem(4px)) calc(-100% - 0.25rem)
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__helper-text--MarginTop	0.25rem
--pf-v5-c-date-picker__helper-text--MarginTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__input--c-form-control--Width	calc(10 * 1ch + calc(2rem + 0.5rem))
--pf-v5-c-date-picker__input--c-form-control--Width calc(--pf-v5-c-date-picker__input--c-form-control--width-chars * 1ch + --pf-v5-c-date-picker__input--c-form-control--width-base) calc(10 * 1ch + calc(--pf-v5-global--spacer--xl + --pf-v5-global--spacer--sm)) calc(10 * 1ch + calc($pf-v5-global--spacer--xl + $pf-v5-global--spacer--sm)) calc(10 * 1ch + calc(pf-size-prem(32px) + pf-size-prem(8px))) calc(10 * 1ch + calc(2rem + 0.5rem))
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__input--c-form-control--width-base	calc(2rem + 0.5rem)
--pf-v5-c-date-picker__input--c-form-control--width-base calc(--pf-v5-global--spacer--xl + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--xl + $pf-v5-global--spacer--sm) calc(pf-size-prem(32px) + pf-size-prem(8px)) calc(2rem + 0.5rem)
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__input--c-form-control--width-chars	10
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__calendar--BackgroundColor	#fff
--pf-v5-c-date-picker__calendar--BackgroundColor --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff
	.pf-v5-c-date-picker	--pf-v5-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-v5-c-date-picker__calendar--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__calendar--ZIndex	200
--pf-v5-c-date-picker__calendar--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__calendar--Top	calc(100% + 0.25rem)
--pf-v5-c-date-picker__calendar--Top calc(100% + --pf-v5-global--spacer--xs) calc(100% + $pf-v5-global--spacer--xs) calc(100% + pf-size-prem(4px)) calc(100% + 0.25rem)
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__calendar--Right	auto
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__calendar--Left	0
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__calendar--m-align-right--Right	0
	.pf-v5-c-date-picker	--pf-v5-c-date-picker__calendar--m-align-right--Left	auto
	.pf-v5-c-date-picker__calendar.pf-m-align-right	--pf-v5-c-date-picker__calendar--Right	0
--pf-v5-c-date-picker__calendar--Right --pf-v5-c-date-picker__calendar--m-align-right--Right 0
	.pf-v5-c-date-picker__calendar.pf-m-align-right	--pf-v5-c-date-picker__calendar--Left	auto
--pf-v5-c-date-picker__calendar--Left --pf-v5-c-date-picker__calendar--m-align-right--Left auto
	.pf-v5-c-date-picker.pf-m-top .pf-v5-c-date-picker__calendar	--pf-v5-c-date-picker__calendar--Top	0
--pf-v5-c-date-picker__calendar--Top --pf-v5-c-date-picker--m-top__calendar--Top 0
	.pf-v5-c-date-picker__calendar.pf-m-static	--pf-v5-c-date-picker--m-top__calendar--TranslateY	0

View source on GitHub