New component: Datepicker

[mrosvik]

Existing datepickers in other design systems

• https://jokul.fremtind.no/komponenter/datepicker
• https://carbondesignsystem.com/components/date-picker/usage/
• https://design-system.service.gov.uk/components/date-input/
• https://design-system.service.gov.uk/patterns/dates/
• https://designsystem.dk/kode/komponenter/datovaelger/
• https://aksel.nav.no/komponenter/core/datepicker

Research:

• Nettstedene/aktørene bruker ulike datoformater/måter skrive inn datoer på innsiktsbibliotek#22
• Date input alphagov/govuk-design-system-backlog#42
• What makes an accessible date picker? (Conference: Inclusive design)

Altinn 3 needs

• Show max/min date possible to pick / Have a way to show that some dates are not possible to pick
• Variants of the picker for example time or month-picker

---

Tasks

Beta Give feedback

1. Datepicker: Research and Specification (Collect in this Epic)
2. Date picker: Design component in Figma #28
   🎨 figma +1
3. Datepicker: Write guidelines for usage #1112
   documentation/guidelines +1
4. Datepicker: Develop React component designsystem#1113
   react +1
5. Datepicker: WCAG-test

[RonnyB71]

Requirements asked for by application developers:

• The ability to pass in an arbitrary list of available dates to select from e.g. 2-4 days within each week for 3 months
• The ability select time as well as date.

[Barsnes]

Aksel and Shadcn uses react day picker for their date pickers.

[fredrikstorheil]

Summary of: What makes an accessible date picker? Is it even possible? - Inclusive Design 24

I recommend going through the presentation yourselves.
You'll need to navigate downwards on some pages, this is indicated with the four arrows in the bottom right corner.
I also recommend watching the YouTube video.

The presentation covers:

• When should you use a date picker?
• A decision tree for building new components.
• How to conduct ‘accessibility unit testing’ to determine if your date picker is accessible.

Start with asking these questions. Is a date picker the best solution:

• For the problem you are trying to solve?
• For your key audiences?

Date pickers can be suitable for some situations, such as choosing dates for a holiday. Date pickers can be less than ideal in other situations, such as a ‘Date of birth’ component.

The presenter uses these three date pickers as examples in the test:

• Native date picker
• ARIA APG Date Picker
• U.S. Web Design System Date Picker

All three datepickers have their strengths and weaknesses.

[mrosvik]

New design by Altinn Apps, 29. aug 2024: