Patternfly Logo

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





Props

DatePicker properties
NameTypeRequiredDefaultDescription
afterEndDateErrorMessagestringNoError message to display when the date is provided after the provided maxDate.
aria-labelstringNo'Date picker'Accessible label for the date picker
beforeMinDateErrorMessagestringNoError message to display when the date is provided before the provided minDate.
classNamestringNo''Additional classes added to the date time picker.
dateFormatstringNo'mm/dd/yyyy'The case sensitive pattern of tokens representing desired readable format of the date. 'MM/DD/YYYY' by default.
dateOutOfRangeErrorMessagestringNoError message to display when the date is provided in outside the valid date range.
invalidFormatErrorMessagestringNoError message to display when the date is provided in an invalid format.
isDisabledbooleanNofalseFlag indicating the date picker is disabled
isInvalidbooleanNofalseFlag indicating whether the value of the date picker is invalid.
localeDatePickerLocalesNoDatePickerLocales.enSpecify the locale of the date.
maxDatestringNo''The maximum date that a user can pick to.
minDatestringNo''The minimum date that a user can start picking from.
onChange(value: string, date?: Date) => voidNo(): any => undefinedCallback called every time the input value changes
placeholderstringNo'mm/dd/yyyy'String to display in the empty date picker field as a hint for the expected date format
valuestringNo''A date string. The format could be the expected date format, or an ISO 8601 formatted date string

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__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