Date picker

A date picker helps users select a specific date, time, or range of time-related values.

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

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-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--m-top__calendar--TranslateY calc(-100% - --pf-global--spacer--xs) calc(-100% - $pf-global--spacer--xs) calc(-100% - pf-size-prem(4px)) calc(-100% - 0.25rem)
	.pf-c-date-picker	--pf-c-date-picker__helper-text--MarginTop	0.25rem
--pf-c-date-picker__helper-text--MarginTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-date-picker	--pf-c-date-picker__helper-text--FontSize	0.875rem
--pf-c-date-picker__helper-text--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-date-picker	--pf-c-date-picker__helper-text--Color	#151515
--pf-c-date-picker__helper-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-date-picker	--pf-c-date-picker__helper-text--m-error--Color	#c9190b
--pf-c-date-picker__helper-text--m-error--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #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__input--c-form-control--Width calc(--pf-c-date-picker__input--c-form-control--width-chars * 1ch + --pf-c-date-picker__input--c-form-control--width-base) calc(10 * 1ch + calc(--pf-global--spacer--xl + --pf-global--spacer--sm)) calc(10 * 1ch + calc($pf-global--spacer--xl + $pf-global--spacer--sm)) calc(10 * 1ch + calc(pf-size-prem(32px) + pf-size-prem(8px))) 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__input--c-form-control--width-base calc(--pf-global--spacer--xl + --pf-global--spacer--sm) calc($pf-global--spacer--xl + $pf-global--spacer--sm) calc(pf-size-prem(32px) + pf-size-prem(8px)) 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__calendar--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #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__calendar--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-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-c-date-picker	--pf-c-date-picker__calendar--ZIndex	200
--pf-c-date-picker__calendar--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-date-picker	--pf-c-date-picker__calendar--Top	calc(100% + 0.25rem)
--pf-c-date-picker__calendar--Top calc(100% + --pf-global--spacer--xs) calc(100% + $pf-global--spacer--xs) calc(100% + pf-size-prem(4px)) 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__helper-text--Color --pf-c-date-picker__helper-text--m-error--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-date-picker__calendar.pf-m-align-right	--pf-c-date-picker__calendar--Right	0
--pf-c-date-picker__calendar--Right --pf-c-date-picker__calendar--m-align-right--Right 0
	.pf-c-date-picker__calendar.pf-m-align-right	--pf-c-date-picker__calendar--Left	auto
--pf-c-date-picker__calendar--Left --pf-c-date-picker__calendar--m-align-right--Left auto
	.pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar	--pf-c-date-picker__calendar--Top	0
--pf-c-date-picker__calendar--Top --pf-c-date-picker--m-top__calendar--Top 0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines