Datepicker

[Febakke]

Relevant:

• Nettstedene/aktørene bruker ulike datoformater/måter skrive inn datoer på innsiktsbibliotek#22
• What makes an accessible date picker? (Conference: Inclusive design)
• Who needs a JavaScript date picker?
• Maybe You Don’t Need a Date Picker
• Ask users for dates (gov.uk)
• Date input alphagov/govuk-design-system-backlog#42

[Barsnes]

Eg trur det kan være nyttig å splitte ein datepicker inn i fleire komponenta:

• Datepicker, for rein dato
• Timepicker, for tid
• DateTimePicker, for dato og tid samtidig

Eventuelt kan også desse være nyttige:

• MonthPicker
• DayPicker
• YearPicker

[eirikbacker]

Ang. datepicker: NAV bygger oppå ReactDayPicker - som mange andre på nett. Den er kjekk, men litt styrere dersom man skal lage noe eget som f.eks monthpicker.

Dette prosjektet er lovende: https://wicky.nillia.ms/cally/ (web component)

Dette er den versjonen vi laget i NRK: https://static.nrk.no/core-components/latest/index.html?core-datepicker/readme.md (web component) - denne definerer et "område" som populeres som gir konsumenten mulighet til å bygge opp grensesnittet ganske fritt selv ☺️

@Tobias Barsnes og jeg snakket litt på fredag om funksjonalitet - kan det være den ikke skal gjøre noe annet enn native input type="date" gjør?

EnTur og Vy bygger på ReactAria fra Adobe, men denne finnes kun for React og mye hooks

[Edavda]

Team Apps will be working on implementing a temporary datepicker due to technical issues with the current one.
Progress is tracked in this issue

[TomasEng]

Jeg har nevnt dette tidligere, men nå som støtten for <input type="date"/> osv. har blitt såpass bra, savner jeg at dette alternativet er med i vurderingen. Målet til Designsystemet er å gjøre brukeropplevelsen mer forutsigbar, og med det i mente ser jeg ikke hvordan det skal hjelpe å innføre enda en måte å oppgi datoer på. Komponenten bør i så fall oppføre seg veldig likt som den som er innebygget.

Her er et utvalg fordeler med <input type="date"/>. Den

• støtter både manuell innskriving og valg fra kalender.
• er helt lik på tvers av alle nettsider.
• bruker automatisk datoformatet som gjelder for brukerens språk/region.
• følger brukerens innstillinger for utseende og skriftstørrelse i operativsystemet.
• er i tråd med Designsystemets mål om å bruke HTML-verktøy direkte der det lar seg gjøre.
• er svært godt gjennomtestet, med tanke på at den allerede har vært i bruk i de store nettleserne i flere år.

Bonus: Det finnes også etablerte typer for klokkeslett (time) og dato med klokkeslett (datetaime-local). month og week finnes også, men mangler foreløpig støtte i Firefox og Safari.

Så er det et par ting som jeg vet ønskes, men som på nåværende tidspunkt ikke støttes av denne kalenderen. Her er mine kommentarer til disse:

• Man kan ikke spesifisere at enkelte datoer ikke kan velges i kalenderen: I og med at brukeren har mulighet til å skrive inn dato manuelt, kan vi uansett ikke hindre den i å oppgi visse datoer, så det må være en form for validering etter at datoen er valgt.
• Man kan ikke velge perioder: Men man kan ha datofelter for start og slutt. Det gir i hvert fall en forutsigbar brukeropplevelse, i motsetning til en periodevelger, som jeg har sett mange variasjoner på der ute.

[eirikbacker]

Enig, godt peng 👍 Jeg støtter dette innspillet.
Vil også legge til på listen:
Måten dato formateres/vises for sluttbruker, er basert på sluttbrukers OS-innstilling - ikke nettsidens lang, og det er ingen attributter eller andre muligheter for å overstyre dette 😱
Vi i Mattilsynet har opplevd at en inspektør møter opp på feil dato, fordi de har sin PC på engelsk, men nettsiden vi lager er på norsk, så dato 03-02-2026 vises som 02-03-2026 :(