Date picker

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




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



Controlled required

Controlling the date picker calendar state



The main date picker component.
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`)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.


Additional properties that extend from and can be passed to the main component. These properties allow customizing the calendar formatting and aria-labels.
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
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.


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().
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.


Props that customize the requirement of a date
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

calc(-100% - 0.25rem)
calc(10 * 1ch + calc(2rem + 0.5rem))
calc(2rem + 0.5rem)
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
calc(100% + 0.25rem)
auto .pf-v5-c-date-picker__calendar--pf-v5-c-date-picker__calendar--Top

View source on GitHub