Date picker

A date picker allows users to either manually enter a date or select a 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-v6-c-date-picker`	`<div>`	Initiates the date picker component. Required
`.pf-v6-c-date-picker__input`	`<div>`	Initiates the date picker input container. Required
`.pf-v6-c-date-picker__helper-text`	`<div>`	Initiates the date picker helper text.
`.pf-v6-c-date-picker__calendar`	`<div>`	Initiates an optional date picker calendar container. Note: Required in the react date picker component.
`.pf-m-top`	`.pf-v6-c-date-picker`	Modifies to display the calendar above the date picker.
`.pf-m-align-right`	`.pf-v6-c-date-picker__calendar`	Modifies the calendar to align the calendar to the right edge of the date picker.
`.pf-m-static`	`.pf-v6-c-date-picker__calendar`	Modifies the calendar to be statically positioned to support custom positioning.

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .pf-v6-c-date-picker)	--pf-v6-c-date-picker--m-top__calendar--InsetBlockStart	0
	:where(:root, .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)
	:where(:root, .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
	:where(:root, .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))
	:where(:root, .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)
	:where(:root, .pf-v6-c-date-picker)	--pf-v6-c-date-picker__input--c-form-control--width-chars	11
	:where(:root, .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
	:where(:root, .pf-v6-c-date-picker)	--pf-v6-c-date-picker__calendar--BoxShadow	0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
--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 --pf-t--global--box-shadow--color--md --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--200 0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
	:where(:root, .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
	:where(:root, .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)
	:where(:root, .pf-v6-c-date-picker)	--pf-v6-c-date-picker__calendar--InsetInlineEnd	auto
	:where(:root, .pf-v6-c-date-picker)	--pf-v6-c-date-picker__calendar--InsetInlineStart	0
	:where(:root, .pf-v6-c-date-picker)	--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd	0
	:where(:root, .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

View source on GitHub