Date picker

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

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-date-picker	--pf-v6-c-date-picker--m-top__calendar--InsetBlockStart	0
	.pf-v6-c-date-picker	--pf-v6-c-date-picker--m-top__calendar--TranslateY	calc(-100% - 0.25rem)
--pf-v6-c-date-picker--m-top__calendar--TranslateY calc(-100% - --pf-t--global--spacer--xs) calc(-100% - --pf-t--global--spacer--100) calc(-100% - 0.25rem)
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__helper-text--MarginBlockStart	0.5rem
--pf-v6-c-date-picker__helper-text--MarginBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__input--c-form-control--Width	calc(11 * 1ch + calc(2rem + 0.5rem))
--pf-v6-c-date-picker__input--c-form-control--Width calc(--pf-v6-c-date-picker__input--c-form-control--width-chars * 1ch + --pf-v6-c-date-picker__input--c-form-control--width-base) calc(11 * 1ch + calc(--pf-t--global--spacer--xl + --pf-t--global--spacer--sm)) calc(11 * 1ch + calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--200)) calc(11 * 1ch + calc(2rem + 0.5rem))
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__input--c-form-control--width-base	calc(2rem + 0.5rem)
--pf-v6-c-date-picker__input--c-form-control--width-base calc(--pf-t--global--spacer--xl + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--200) calc(2rem + 0.5rem)
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__input--c-form-control--width-chars	11
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--BorderWidth	0px
--pf-v6-c-date-picker__calendar--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-date-picker__calendar--BorderColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-date-picker__calendar--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--BoxShadow	0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
--pf-v6-c-date-picker__calendar--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--ZIndex	200
--pf-v6-c-date-picker__calendar--ZIndex --pf-t--global--z-index--sm --pf-t--global--z-index--200 200
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--InsetBlockStart	calc(100% + 0.25rem)
--pf-v6-c-date-picker__calendar--InsetBlockStart calc(100% + --pf-t--global--spacer--xs) calc(100% + --pf-t--global--spacer--100) calc(100% + 0.25rem)
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--InsetInlineEnd	auto
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--InsetInlineStart	0
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd	0
	.pf-v6-c-date-picker	--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart	auto
	.pf-v6-c-date-picker__calendar.pf-m-align-right	--pf-v6-c-date-picker__calendar--InsetInlineEnd	0
--pf-v6-c-date-picker__calendar--InsetInlineEnd --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd 0
	.pf-v6-c-date-picker__calendar.pf-m-align-right	--pf-v6-c-date-picker__calendar--InsetInlineStart	auto
--pf-v6-c-date-picker__calendar--InsetInlineStart --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart auto
	.pf-v6-c-date-picker.pf-m-top .pf-v6-c-date-picker__calendar	--pf-v6-c-date-picker__calendar--InsetBlockStart	0
--pf-v6-c-date-picker__calendar--InsetBlockStart --pf-v6-c-date-picker--m-top__calendar--InsetBlockStart 0
	.pf-v6-c-date-picker__calendar.pf-m-static	--pf-v6-c-date-picker--m-top__calendar--TranslateY	0