Skip to content
PatternFly

Date picker

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

Examples

Basic

Required

To require users to select a date before continuing, use the requiredDateOptions.isRequired property.

A required date picker will be invalid when the text input is empty and either the text input loses focus or the date picker popover is closed.

The error message can be customized via the requiredDateOptions.emptyDateText property.

American format

Helper text

Select a date.

Min and max date

French

Controlled



Controlled required



Controlling the date picker calendar state



Props

DatePicker

The main date picker component.
*required
NameTypeDefaultDescription
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline''inline'The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo={() => document.body}; menuAppendTo={document.getElementById('target')}
aria-labelstring'Date picker'Accessible label for the date picker.
buttonAriaLabelstring'Toggle date picker'Accessible label for the button to open the date picker.
classNamestringAdditional classes added to the date picker.
dateFormat(date: Date) => string(date: Date) => `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date .getDate() .toString() .padStart(2, '0')}`How to format the date in the text input.
dateParse(value: string) => Date(val: string) => (val.split('-').length === 3 ? new Date(`${val}T00:00:00`) : new Date(undefined))How to parse the date in the text input.
helperTextReact.ReactNodeHelper text to display alongside the date picker. Expects a HelperText component.
inputPropsTextInputProps{}Additional props for the text input.
invalidFormatTextstring'Invalid date'Error message to display when the text input contains a non-empty value in an invalid format.
isDisabledbooleanfalseFlag indicating the date picker is disabled.
localeNo type infoundefined
onBlur(event: any, value: string, date?: Date) => void(): any => undefinedCallback called every time the text input loses focus.
onChange(event: React.FormEvent<HTMLInputElement>, value: string, date?: Date) => void(): any => undefinedCallback called every time the text input value changes.
placeholderstring'YYYY-MM-DD'String to display in the empty text input as a hint for the expected date format.
popoverPropsPartial<Omit<PopoverProps, 'appendTo'>>Props to pass to the popover that contains the calendar month component.
requiredDateOptionsDatePickerRequiredObjectOptions to customize the requirement of a date
styleNo type info{}
validators((date: Date) => string)[][]Functions that returns an error message if a date is invalid.
valuestring''Value of the text input.

CalendarFormat

Additional properties that extend from and can be passed to the main component. These properties allow customizing the calendar formatting and aria-labels.
*required
NameTypeDefaultDescription
cellAriaLabel(date: Date) => stringAccessible label for the date cells.
dayFormat(date: Date) => React.ReactNodeHow to format days in buttons in table cells.
inlinePropsCalendarMonthInlinePropsProps used to ensure accessibility when displaying the calendar month inline.
localestringIf using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
longWeekdayFormat(date: Date) => React.ReactNodeHow to format days in header for screen readers.
monthFormat(date: Date) => React.ReactNodeHow to format months in month select.
nextMonthAriaLabelstringAccessible label for the next month button.
prevMonthAriaLabelstringAccessible label for the previous month button.
rangeStartDateWhich date to start range styles from.
weekdayFormat(date: Date) => React.ReactNodeHow to format week days in header.
weekStart0 | 1 | 2 | 3 | 4 | 5 | 6 | WeekdayDay of week that starts the week. 0 is Sunday, 6 is Saturday.
yearInputAriaLabelstringAccessible label for the year input.

DatePickerRef

Allows finer control over the calendar's open state when a React ref is passed into the date picker component. Accessed via ref.current[property], e.g. ref.current.toggleCalendar().
*required
NameTypeDefaultDescription
isCalendarOpenrequiredbooleanCurrent calendar open status.
setCalendarOpenrequired(isOpen: boolean) => voidSets the calendar open status.
toggleCalendarrequired(isOpen?: boolean) => voidToggles the calendar open status. If no parameters are passed, the calendar will simply toggle its open status. If the isOpen parameter is passed, that will set the calendar open status to the value of the isOpen parameter. If the eventKey parameter is set to 'Escape', that will invoke the date pickers onEscapePress event to toggle the correct control appropriately.

DatePickerRequiredObject

Props that customize the requirement of a date
*required
NameTypeDefaultDescription
emptyDateTextstringError message to display when the text input is empty and the isRequired prop is also passed in.
isRequiredbooleanFlag indicating the date is required.

CSS variables

Expand or collapse columnSelectorVariableValue
.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--pf-v5-c-date-picker__helper-text--MarginTop
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--pf-v5-c-date-picker__input--c-form-control--width-base
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--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--pf-v5-c-date-picker__calendar--ZIndex
200
.pf-v5-c-date-picker--pf-v5-c-date-picker__calendar--Top
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.pf-m-align-right--pf-v5-c-date-picker__calendar--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.pf-m-static--pf-v5-c-date-picker--m-top__calendar--TranslateY
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines