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.
Live demo
Relaterte komponenter
Enkelt tekstfelt uten datovelger eller visuell støtte.
Inputfelt med søk- og/eller filtreringsmuligheter.
Egner seg til valg mellom få, faste datoer
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 |
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
Unngå
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:
Tips og anbefalinger for hvordan du bør håndtere datovelgere.
Grunnleggende prinsipper for tilgjengelige skjemafelt.
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?
import @oslokommune/punkt-elements/dist/pkt-datepicker.js;import { PktDatepicker } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-datepicker.js" type="module"></script>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 |
Farger
| Element | CSS Variabel |
|---|---|
| Border | |
| Tekst | |