[web component func] Datepicker

[alizedebray]

ℹ️ This ticket is only about functionality, no styles need to be implemented.

📝 Description

The datepicker can be used inline or alongside an input to select a single date or a range of dates.

♿ Accessibility

• All datepicker features must have accessible labels (including meaningful icons and abbreviations).
• The datepicker popup must be reachable and operable via keyboard (tab to open, arrow keys to navigate days, Enter to select).
• The currently selected date and today’s date must be visually distinguishable and communicated via ARIA attributes.
• If linked to an input, the input must have aria-haspopup="dialog" and be labeled appropriately.
• Focus must be managed correctly when opening/closing the datepicker popover, returning focus to the input.

⚙️ Requirements

• The datepicker uses Air Datepicker under the hood.
• By default, the datepicker allows for single-date selection. A range property can be set to allow for date-range selection.
• By default, the component shows the day view of the currently selected date. If no date is selected, it shows the day view corresponding to the current date (today).
• The datepicker has a header that allows switching the current view. It contains the following controls:
  • < and > buttons to navigate to the previous and next month in the day view
  • A button to switch between day, month, and year selection (behavior described here)
• It is possible to disable individual dates or ranges of dates (independent of the range property). Disabled dates cannot be selected.
• The selected date and the current date are both visually highlighted.
• If the datepicker is linked to an input, then:
  • The input has a calendar button that opens the datepicker.
  • The datepicker opens in a popover container.
  • The selected date or range is always in sync:
    • Selecting a date in the datepicker updates the input value.
    • Updating the input value updates the datepicker selection.
  • The input uses a mask: 00.00.0000 for single-date selection, 00.00.0000 - 00.00.0000 for range selection.
  • The input may have min and max attributes. The datepicker should not allow selecting dates before the min date or after the max date. Both min and max are included in the selectable range.
  • It is possible to add validation to the input using .is-valid and .is-invalid classes. These classes are not set automatically by the component. However, a validation state must be available so that projects can set these classes themselves.

🧪 Testing

• Single-date selection functionality.
• Range selection functionality.
• Correct initial view (selected date or today).
• Header navigation: previous/next month, view switching.
• Disabled dates cannot be selected.
• Selected date(s) and today are highlighted correctly.
• Input integration: opening popover, synchronization of values, mask behavior.
• Validation state can be applied and read by the project.
• Keyboard accessibility: tab navigation, arrow key movement, Enter/Space selection.
• Localization: switching language updates labels correctly.
• Popover focus management: focus returns to input on close.

💻 Proposed implementation

<!-- Inline datepicker -->
<post-datepicker></post-datepicker>

<!-- Input with range datepicker popover -->
<post-datepicker range="">
  <input type="text" min="2010-01-01" max="2029-31-12" />
</post-datepicker>

🔗 References

• https://air-datepicker.com/docs
• https://ng-bootstrap.github.io/#/components/datepicker/api
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date

📃 Tasks

• Implement component functionality
• Create developer-only documentation in Storybook
• Add functional tests
• Add React integration tests
• Add Angular integration tests