Datepicker

Release dato: 03.10.2024

Sist oppdatert: 19.06.2025

Datepicker (datovelger) lar brukeren velge en dato, flere datoer eller et datointervall. Brukeren kan enten skrive dato direkte i feltet, eller velge fra en kalender.

Datepicker passer godt i skjemaer der datoen har betydning for videre steg, og når du vil tilby både fritekst og visuell kalender.

Relaterte komponenter

Varianter

Card finnes i to hovedvarianter. Du kan kombinere disse med ulike skins og farger.

Variant	Bruk
Enkel dato	Lar deg velge én spesifikk dato
Flere datoer	Lar deg velge flere datoer samtidig
Periode/intervall	Lar deg velge en periode med start- og sluttdato

Eksempler på layout-variantene av datepicker

Retningslinjer for bruk

Bruk datepicker når

du vil la brukeren velge en dato eller et datointervall
det er behov for både fritekst og kalender
datoen er av betydning for videre steg i skjema eller prosess

Unngå datepicker når

datoen ikke har betydning for oppgaven
brukeren kun trenger å velge mellom få, spesifikke datoer (da kan select eller radiobutton være bedre)

Forklar hva brukeren kan gjøre

Bruk hjelpetekst og label for å forklare format eller regler, f.eks. maks antall datoer eller begrensede valg. Beskriv hva som skal velges.

Gjør slik

Eksempel forklarende label og hjelpetekst — Skriv forklarende label og hjelpetekst som hjelper brukeren å fylle inn riktig og forventet innhold

Unngå

Eksempel på datepicker med uklare etiketter. — Unngå uklare etiketter som kan forvirre

Responsivitet

Datepicker tilpasser seg automatisk skjermstørrelsen. Kalenderen skalerer ned på små skjermer, slik at det fortsatt er lett å velge dato.

Vi anbefaler at du tester datepicker i løsningen din på ulike skjermstørrelser, både i stående og liggende visning, for å sikre at kalender, valgte datoer og eventuelle feilmeldinger vises tydelig.

Universell utforming

Label skal alltid være synlig

Alle skjemaelementer må ha en synlig label (etikett). Den skal beskrive hva brukeren skal gjøre, for eksempel «Velg dato for avreise».

Dersom etiketten skjules visuelt, skal den likevel være tilgjengelig for skjermlesere ved å bruke skjulte klasser (for eksempel pkt-sr-only). Dette sikrer at brukere med skjermleser forstår hva feltet handler om.

Dato må kunne velges med tastatur

Datepicker må fungere uten mus. Brukeren skal kunne:

Åpne kalenderen med tastatur
Navigere mellom datoer med piltaster
Velge en dato med Enter
Lukke kalenderen med Esc

Dette er særlig viktig for personer som bruker tastaturnavigasjon eller spesialutstyr. Sørg også for at det er tydelig hvilken dato som har fokus i kalenderen.

Skjermlesere må kunne lese valgt dato

Når brukeren velger en dato, må denne informasjonen leses opp av skjermleser. Kalenderen må ha riktige ARIA-roller og -attributter, som aria-labelog aria-selected. Bruk også ARIA Live-regioner forsiktig, slik at skjermleseren varsler valgte datoer på en kontrollert måte.

Hvis komponenten har feil, må feilmeldingen knyttes til inputfeltet med aria-describedby.

Vis hjelpetekster for datoformat og regler

Datoformatet må forklares tydelig i komponenten. Bruk hjelpetekst som forklarer:

Hvilket datoformat som skal brukes (f.eks. dd.mm.yyyy)
Om det er begrensninger i valg av datoer
Om brukeren kan velge flere datoer eller en periode

Unngå å kun vise denne informasjonen i placeholder, bruk alltid synlig tekst.

Les mer om universell utforming av cards:

Anatomi

Element	Beskrivelse
1. Etikett (label)	Tekst som forteller hva brukeren skal gjøre
2. Hjelpetekst	Tilleggsinformasjon som forklarer datoformat, regler eller begrensninger (valgfritt)
3. Inputfelt	Feltet der brukeren kan skrive inn dato manuelt, eller hvor valgt dato vises
4. Kalenderikon	Åpner kalenderen ved klikk
5. Kalender (med navigasjon og datoer)	Viser valgt måned
6. Dagens dato	Datoen som er dagens dato, markert i kalenderen
7. Valgt dato/valgt periode	Datoen eller perioden brukeren har valgt, markert i kalenderen og vist i inputfeltet

Implementasjon i kode

Hvordan ta komponenten i bruk?

Bruk i skjema

For skjemaer fungerer Datepicker nær identisk med <select>. For én dato sendes én verdi ut i skjemaet (som vanlig select), og for flere datoer sendes flere datoer ut (som select multiple).

Hendelseshåndtering

Datepicker for én enkel dato har en change-hendelse som sendes ut når ny dato velges (onChange i React). Denne er en “standard” hendelse som sendes ut fra alle input-elementer, som returnerer en Event med target.value som inneholder datoen.

For Datepicker med flere datoer, enten som periode eller frittstående datoer, bør man bruke hendelsen value-change (onValueChange i React). Denne hendelsen sender ut en CustomEvent med detail som inneholder en array av datostrenger.

Testing

Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-datepicker");

Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.

Om du bruker data-testid for å hente ut elementer i testene, vil attributten videresendes til selve skjemaelementet. Dersom du heller ønsker å bruke data-testid på elementet <pkt-datepicker>, må du sette attributten skipForwardTestid på elementet.

Props og tokens

Prop	Type	Beskrivelse
`name`	`string`	Navn for innsending
`label`	`string`	Tekst/label
`helptext`	`string`	Hjelpetekst
`helptextDropdown`	`string`	Hjelpetekst som vises i en lukket boks man kan åpne
`helptextDropdownButton`	`string`	Knappetekst for utvidet hjelpetekst
`dateformat`	`string`	Datoformat for tags i flervalg
`currentmonth`	`ISOdatestring`	Måned som vises i datovelgeren
`value`	`ISOdatestring`	Verdi (kommaseparert ved flervalg)
`excludeweekdays`	`string`	Kommaseparert liste over ukedager (1-7) som skal ekskluderes
`excludedates`	`ISOdatestring`	Utelat datoer (Kommaseparerte ISO-datoer)
`min`	`ISOdatestring`	Tidligst tillatte dato
`max`	`ISOdatestring`	Senest tillatte dato
`weeknumbers`	`boolean`	Vis ukenummer
`withcontrols`	`boolean`	Med velgere for måned/år
`multiple`	`boolean`	Flervalg
`maxlength`	`number`	Maks antall datoer i flervalg
`range`	`boolean`	Datotidsrom (fra og til)
`hasError`	`boolean`	Feil
`errorMessage`	`string`	Feilmelding ved feil
`disabled`	`boolean`	Deaktivert
`fullwidth`	`boolean`	Full bredde
`required`	`boolean`	Påkrevd
`requiredTag`	`boolean`	Vise påkrevd-merking
`requiredText`	`string`	Påkrevd-tekst
`optionalTag`	`boolean`	Vise valgfritt-merking
`optionalText`	`string`	Valgfritt-tekst
`tagText`	`string`	Tekst som vises i en tag ved siden av label
`useWrapper`	`boolean`	Indikerer at feltet skal ha synlig label og hjelpetekst
`id`	`string`	Unik identifikasjon for datovelgeren

Event	Beskrivelse
`change`	Returnerer valgt dato som streng i ISO-format
`value-change`	Returnerer en `array` med valgte datoer i ISO-format
`toggleHelpText`	Returnerer `event.detail { isOpen: true }` eller `event.detail { isOpen: false }` når hjelpeteksten åpnes eller lukkes

OBS! dateformat er standard formatteringsstreng for visning av datoer. Denne brukes for å sette “menneskeleselig” format på datoene i tags ved flervalgsmodus.