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
Props
DatePicker
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| appendTo | HTMLElement | ((ref?: HTMLElement) => HTMLElement) | No | The element to append the popover to | |
| aria-label | string | No | 'Date picker' | Accessible label for the date picker |
| buttonAriaLabel | string | No | 'Toggle date picker' | Aria label for the button to open the date picker |
| className | string | No | Additional classes added to the date time picker. | |
| dateFormat | (date: Date) => string | No | (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 | No | (val: string) => new Date(`${val}T00:00:00`) | How to format the date in the TextInput |
| helperText | React.ReactNode | No | Text for label | |
| invalidFormatText | string | No | 'Invalid date' | Error message to display when the TextInput cannot be parsed. |
| isDisabled | boolean | No | false | Flag indicating the date picker is disabled |
| locale | No type info | No | undefined | |
| onChange | (value: string, date?: Date) => void | No | (): any => undefined | Callback called every time the input value changes |
| placeholder | string | No | 'yyyy-MM-dd' | String to display in the empty date picker field as a hint for the expected date format |
| popoverProps | Omit<PopoverProps, 'appendTo'> | No | Props to pass to the Popover | |
| style | No type info | No | {} | |
| validators | ((date: Date) => string)[] | No | [] | Functions that returns an error message if a date is invalid |
| value | string | No | '' | Value of TextInput |
CalendarFormat
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| cellAriaLabel | No type info | No | Aria-label for the date cells | |
| dayFormat | No type info | No | How to format days in buttons in table cells | |
| locale | No type info | No | 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 | No type info | No | How to format days in header for screen readers | |
| monthFormat | No type info | No | How to format months in Select | |
| nextMonthAriaLabel | No type info | No | Aria-label for the next month button | |
| prevMonthAriaLabel | No type info | No | Aria-label for the previous month button | |
| rangeStart | No type info | No | Which date to start range styles from | |
| weekdayFormat | No type info | No | How to format week days in header | |
| weekStart | No type info | No | Day of week that starts the week. 0 is Sunday, 6 is Saturday. | |
| yearInputAriaLabel | No type info | No | Aria-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
