Summary
Create a <pf-v6-date-picker> web component implementing the PatternFly v6 Date picker component.
A date picker enables users to select or input a date by day, month, and year.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core DatePicker
- MUST implement all accessibility features per PatternFly v6 date picker accessibility
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- Depends on
pf-v6-calendar-month (port that first)
- Depends on
pf-v6-popover / Floating UI for calendar popup
- FACE:
formAssociated = true, ElementInternals - submits ISO date string value
value (string), onChange, onBlur props
placeholder for text input (e.g. "YYYY-MM-DD")
validators passed down to pf-v6-calendar-month
locale, weekStart props
appendTo / Floating UI anchor for popover placement
- Text input: manual typed entry with validation; calendar icon button toggles popover
- Popover pattern:
role="dialog", aria-label, aria-modal; closes on Escape, outside click
- Validation: parse typed date, validate against validators, set
aria-invalid on input
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-date-picker>web component implementing the PatternFly v6 Date picker component.A date picker enables users to select or input a date by day, month, and year.
Prior Art
Requirements
@patternfly/react-coreDatePickerElement-specific considerations
pf-v6-calendar-month(port that first)pf-v6-popover/ Floating UI for calendar popupformAssociated = true,ElementInternals- submits ISO date string valuevalue(string),onChange,onBlurpropsplaceholderfor text input (e.g. "YYYY-MM-DD")validatorspassed down topf-v6-calendar-monthlocale,weekStartpropsappendTo/ Floating UI anchor for popover placementrole="dialog",aria-label,aria-modal; closes on Escape, outside clickaria-invalidon inputChecklist
Implementation
formAssociated = trueElementInternalsfor value/validity reporting.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)