Skip to content
Patternfly Logo

Date picker

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

American format

Helper text

Use the calendar button to select a date.

Min and max date

French

Controlled

Props

DatePicker

NameTypeRequiredDefaultDescription
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)NoThe element to append the popover to
aria-labelstringNo'Date picker'Accessible label for the date picker
buttonAriaLabelstringNo'Toggle date picker'Aria label for the button to open the date picker
classNamestringNoAdditional classes added to the date time picker.
dateFormat(date: Date) => stringNo(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) => DateNo(val: string) => new Date(`${val}T00:00:00`)How to format the date in the TextInput
helperTextReact.ReactNodeNoText for label
invalidFormatTextstringNo'Invalid date'Error message to display when the TextInput cannot be parsed.
isDisabledbooleanNofalseFlag indicating the date picker is disabled
localeNo type infoNoundefined
onChange(value: string, date?: Date) => voidNo(): any => undefinedCallback called every time the input value changes
placeholderstringNo'yyyy-MM-dd'String to display in the empty date picker field as a hint for the expected date format
popoverPropsOmit<PopoverProps, 'appendTo'>NoProps to pass to the Popover
styleNo type infoNo{}
validators((date: Date) => string)[]No[]Functions that returns an error message if a date is invalid
valuestringNo''Value of TextInput

CalendarFormat

NameTypeRequiredDefaultDescription
cellAriaLabelNo type infoNoAria-label for the date cells
dayFormatNo type infoNoHow to format days in buttons in table cells
localeNo type infoNoIf 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
longWeekdayFormatNo type infoNoHow to format days in header for screen readers
monthFormatNo type infoNoHow to format months in Select
nextMonthAriaLabelNo type infoNoAria-label for the next month button
prevMonthAriaLabelNo type infoNoAria-label for the previous month button
rangeStartNo type infoNoWhich date to start range styles from
weekdayFormatNo type infoNoHow to format week days in header
weekStartNo type infoNoDay of week that starts the week. 0 is Sunday, 6 is Saturday.
yearInputAriaLabelNo type infoNoAria-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