Skip to content
Patternfly Logo

Date picker

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

American format

Helper text

Select a date.

Min and max date

French

Controlled

Controlling the date picker calendar state

Props

DatePicker

*required
NameTypeDefaultDescription
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent''parent'The container to append the menu to. Defaults to 'parent'. 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'Aria label for the button to open the date picker
classNamestringAdditional classes added to the date time 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 TextInput
dateParse(value: string) => Date(val: string) => val.split('-').length === 3 && new Date(`${val}T00:00:00`)How to format the date in the TextInput
helperTextReact.ReactNodeText for label
inputPropsTextInputProps{}Additional props for input field
invalidFormatTextstring'Invalid date'Error message to display when the TextInput cannot be parsed.
isDisabledbooleanfalseFlag indicating the date picker is disabled
localeNo type infoundefined
onBlur(value: string, date?: Date) => void(): any => undefinedCallback called every time the input loses focus
onChange(value: string, date?: Date) => void(): any => undefinedCallback called every time the input value changes
placeholderstring'YYYY-MM-DD'String to display in the empty date picker field as a hint for the expected date format
popoverPropsOmit<PopoverProps, 'appendTo'>Props to pass to the Popover
styleNo type info{}
validators((date: Date) => string)[][]Functions that returns an error message if a date is invalid
valuestring''Value of TextInput

CalendarFormat

*required
NameTypeDefaultDescription
cellAriaLabel(date: Date) => stringAria-label for the date cells
dayFormat(date: Date) => React.ReactNodeHow to format days in buttons in table cells
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 Select
nextMonthAriaLabelstringAria-label for the next month button
prevMonthAriaLabelstringAria-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.
yearInputAriaLabelstringAria-label for the year input

DatePickerRef

*required
NameTypeDefaultDescription
isCalendarOpenrequiredbooleanCurrent calendar open status
setCalendarOpenrequired(isOpen: boolean) => voidSets the calendar open status
toggleCalendarrequired(isOpen?: boolean, eventKey?: string) => 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.

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--pf-c-date-picker__helper-text--MarginTop
0.25rem
.pf-c-date-picker--pf-c-date-picker__helper-text--FontSize
0.875rem
.pf-c-date-picker--pf-c-date-picker__helper-text--Color
#151515
.pf-c-date-picker--pf-c-date-picker__helper-text--m-error--Color
#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--pf-c-date-picker__input--c-form-control--width-base
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--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--pf-c-date-picker__calendar--ZIndex
200
.pf-c-date-picker--pf-c-date-picker__calendar--Top
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__calendar.pf-m-align-right--pf-c-date-picker__calendar--Right
0
.pf-c-date-picker__calendar.pf-m-align-right--pf-c-date-picker__calendar--Left
auto
.pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar--pf-c-date-picker__calendar--Top
0

View source on GitHub