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
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' | Aria label for the button to open the date picker |
| className | string | Additional 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 |
| helperText | React.ReactNode | Text for label | |
| inputProps | TextInputProps | {} | Additional props for input field |
| invalidFormatText | string | 'Invalid date' | Error message to display when the TextInput cannot be parsed. |
| isDisabled | boolean | false | Flag indicating the date picker is disabled |
| locale | No type info | undefined | |
| onBlur | (value: string, date?: Date) => void | (): any => undefined | Callback called every time the input loses focus |
| onChange | (value: string, date?: Date) => void | (): any => undefined | Callback called every time the input value changes |
| placeholder | string | 'YYYY-MM-DD' | String to display in the empty date picker field as a hint for the expected date format |
| popoverProps | Omit<PopoverProps, 'appendTo'> | Props to pass to the Popover | |
| style | No type info | {} | |
| validators | ((date: Date) => string)[] | [] | Functions that returns an error message if a date is invalid |
| value | string | '' | Value of TextInput |
CalendarFormat
| Name | Type | Default | Description |
|---|---|---|---|
| cellAriaLabel | (date: Date) => string | Aria-label for the date cells | |
| dayFormat | (date: Date) => React.ReactNode | How to format days in buttons in table cells | |
| 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 Select | |
| nextMonthAriaLabel | string | Aria-label for the next month button | |
| prevMonthAriaLabel | string | Aria-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 | Aria-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 | ||
View source on GitHub
