Implement basic OnyxDatePicker

[mj-hof]

Depends on

• Concept basic datepicker #1817

Why?

We want to offer a date picker component where users can select a date or datetime, e.g. birthdays or meeting dates.
Because implementing a whole date picker from scratch is time consuming, we want to offer a "quick win" by already
offering a OnyxDatePicker component which uses the existing OnyxInput and the native HTML <input type="date" /> for the flyout.
Like this, the component mostly looks and feels like onyx and we can provide the component quicker.

Later, we can refactor it and build our own flyout with more advanced features.

Design

Figma

Acceptance criteria

• a date can be selected
  • manually via keyboard
  • via flyout
• a datetime can be selected
  • manually via keyboard
  • via flyout
• the component considers the current i18n locale and the users browser preference for i18n
• all features of the OnyxInput are supported, except properties that do not make sense for dates (e.g. type email)
• if possible, the native HTML flyout aligns with the light/dark mode
• a min and max date can be set
• should work in all timezones

Implementation details

• Already started on branch feat/1818-datepicker
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
• values should be ISO timestamps
• for formatting, we should use the Intl API

export type OnyxDatePickerProps = OnyxInputProps & {
  type?: "date" | "datetime";
};

Definition of Done

• The following component requirements are implemented:
  • skeleton
  • density
  • example usage added to apps/demo-app/src/views/HomeView.vue
• covered by tests
  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)
• follow-up tickets were created if necessary
• updated version + documentation is deployed
• Storybook can show the feature
• Storybook code snippet of new/changed examples are checked that they are generated correctly
• Namings are aligned with Figma

Approval

• Storybook
• Deployed Docs
• approved by designer @jannick-ux
• approved by dev

[larsrickert]

Idea: Check out new temporal date API