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 about the process, visit our about page or our Beta components page on GitHub.
Examples
Props
DatePicker
| Name | Type | Default | Description |
|---|---|---|---|
| appendTo | HTMLElement | ((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-label | string | 'Date picker' | Accessible label for the date picker. |
| buttonAriaLabel | string | 'Toggle date picker' | Accessible label for the button to open the date picker. |
| className | string | Additional 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 format the date in the text input. |
| helperText | React.ReactNode | Helper text to display alongside the date picker. | |
| inputProps | TextInputProps | {} | Additional props for the text input. |
| invalidFormatText | string | 'Invalid date' | Error message to display when the text input cannot be parsed. |
| isDisabled | boolean | false | Flag indicating the date picker is disabled. |
| locale | No type info | undefined | |
| onBlur | (event: any, value: string, date?: Date) => void | (): any => undefined | Callback called every time the text input loses focus. |
| onChange | (event: React.FormEvent<HTMLInputElement>, value: string, date?: Date) => void | (): any => undefined | Callback called every time the text input value changes. |
| placeholder | string | 'YYYY-MM-DD' | String to display in the empty text input as a hint for the expected date format. |
| popoverProps | Partial<Omit<PopoverProps, 'appendTo'>> | Props to pass to the popover that contains the calendar month component. | |
| style | No type info | {} | |
| validators | ((date: Date) => string)[] | [] | Functions that returns an error message if a date is invalid. |
| value | string | '' | Value of the text input. |
CalendarFormat
| Name | Type | Default | Description |
|---|---|---|---|
| cellAriaLabel | (date: Date) => string | Accessible label for the date cells. | |
| dayFormat | (date: Date) => React.ReactNode | How to format days in buttons in table cells. | |
| inlineProps | CalendarMonthInlineProps | Props used to ensure accessibility when displaying the calendar month inline. | |
| locale | string | If 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.ReactNode | How to format days in header for screen readers. | |
| monthFormat | (date: Date) => React.ReactNode | How to format months in month select. | |
| nextMonthAriaLabel | string | Accessible label for the next month button. | |
| prevMonthAriaLabel | string | Accessible label for the previous month button. | |
| rangeStart | Date | Which date to start range styles from. | |
| weekdayFormat | (date: Date) => React.ReactNode | How to format week days in header. | |
| weekStart | 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday | Day of week that starts the week. 0 is Sunday, 6 is Saturday. | |
| yearInputAriaLabel | string | Accessible label for the year input. |
DatePickerRef
| Name | Type | Default | Description |
|---|---|---|---|
| isCalendarOpenrequired | boolean | Current calendar open status. | |
| setCalendarOpenrequired | (isOpen: boolean) => void | Sets the calendar open status. | |
| toggleCalendarrequired | (isOpen?: boolean, eventKey?: string) => void | Toggles 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 | ||
| .pf-c-date-picker__calendar.pf-m-static | --pf-c-date-picker--m-top__calendar--TranslateY | 0 | ||
View source on GitHub
