digdir
New component: Datepicker
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:
- https://github.com/digdir/innsiktsbibliotek/issues/22
- https://github.com/alphagov/govuk-design-system-backlog/issues/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
- [ ] Datepicker: Research and Specification (Collect in this Epic)
- [ ] https://github.com/digdir/designsystem/issues/28
- [ ] https://github.com/digdir/designsystem/issues/1112
- [ ] https://github.com/digdir/designsystem/issues/1113
- [ ] Datepicker: WCAG-test
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.
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:
All three datepickers have their strengths and weaknesses.
NB:
When using native input type="date" the date formatting shown to the user is:
- impossible to change (😱)
- following the OS region/language and not the website language/
lang(😱) - differently implemented across different plattforms/OSes (take away from AI summary when rsearching:)
- If your system language is English and region is Norway, Safari shows the US style
MM/DD/YYYY. - If your system language is Norwegian and region is Norway, you’ll get the expected
DD.MM.YYYY. - If your system language is English and region is UK, you’ll get
DD/MM/YYYY.
- If your system language is English and region is Norway, Safari shows the US style
The sole fact that date is shown MM/DD/YYYY for several of the users in Mattilsynet, when the rest of the page, is itself a production risk as inspectors might misunderstand a important date/deadline/command. We therefore unfortunately consider a custom implementation here too.
