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.

Examples

Basic

American format

Helper text

Select a date.

Min and max date

French

Controlled

Props

DatePicker

*required
NameTypeDefaultDescription
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)The element to append the popover to
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
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

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