DateField
DateField lar brukeren taste en dato i norsk format (dd.mm.åååå) eller åpne enhetens innebygde kalender via en knapp i feltet. Verdien som sendes videre er alltid ISO (åååå-mm-dd), uavhengig av hva som vises i feltet.
Norsk format, ISO-verdi
Brukeren ser og taster dd.mm.åååå. Selve verdien — det som sendes ved innsending og gjennom onChange — er ISO (åååå-mm-dd). Det unngår den amerikanske mm/dd/åååå-tvetydigheten samtidig som datoen er maskinlesbar.
Egnet til
- Datoer brukeren kjenner og kan taste raskt (fødselsdato, startdato)
- Situasjoner der både tasting og en kalender bør være tilgjengelig
- Felt som trenger en nedre og/eller øvre grense for gyldige datoer
Uegnet til
- Fritt datointervall der bruker velger «fra» og «til» (bruk to felter)
- Valg av måned eller år alene uten dag
- Sperring av enkeltdager eller helger — støttes ikke i denne fasen
Kom i gang
I feltet taster brukeren datoen. Feltet er skilletegn-bevisst og fleksibelt: du kan taste 1.1.2026 like gjerne som 01.01.2026 (eller 01012026 uten skilletegn). Teksten står urørt mens du skriver, og feltet normaliserer til dd.mm.åååå — nullutfyller enkeltsifret dag/måned — når det mister fokus (1.1.2026 → 01.01.2026). Året kan tastes med fire sifre (2026) eller to sifre som utvides til 20xx — 1.1.26 blir 01.01.2026. Kalenderknappen til høyre åpner enhetens innebygde datovelger. På desktop kaller knappen showPicker(); på touch fanges tappet av en gjennomsiktig native date-input som ligger oppå knappen, så kalenderen åpnes robust.
Result
Loading...
Kode
Live Editor
<VStack> <DateField label="Fødselsdato" description="dd.mm.åååå" openLabel="Åpne kalender" name="fodt" /> </VStack>
openLabel blir aria-label på kalenderknappen og må sendes inn på riktig språk. description gir formathint som synlig tekst.
Eksempler
Forhåndsvalgt verdi
Startverdien settes i ISO (åååå-mm-dd) og vises som dd.mm.åååå i feltet. I React er defaultValue ukontrollert startverdi; value (sammen med onChange) gir et kontrollert felt.
Result
Loading...
Kode
Live Editor
<VStack> <DateField label="Fødselsdato" description="dd.mm.åååå" openLabel="Åpne kalender" defaultValue="1990-05-17" /> </VStack>
Med min og maks
min og max (ISO) speiles til den native date-inputen og sperrer datoer utenfor intervallet i OS-kalenderen.
Result
Loading...
Kode
Live Editor
<VStack> <DateField label="Dato" description="Velg en dato i 2020-tallet" openLabel="Åpne kalender" min="2020-01-01" max="2030-12-31" /> </VStack>
Med feilmelding
Formateringen validerer ikke — den avviser aldri tastetrykk. Valider på blur eller innsending og vis en egen errorMessage.
Result
Loading...
Kode
Live Editor
<VStack> <DateField label="Fødselsdato" description="dd.mm.åååå" openLabel="Åpne kalender" errorMessage="Du må oppgi en gyldig dato" /> </VStack>
Deaktivert
Result
Loading...
Kode
Live Editor
<VStack> <DateField label="Fødselsdato" description="dd.mm.åååå" openLabel="Åpne kalender" disabled defaultValue="1990-05-17" /> </VStack>
Mobilvelger på tapp
Som standard fokuserer et tapp i feltet for manuell tasting, og kalenderen åpnes via knappen. Med nativePickerOnMobile (HTML: data-native-picker-mobile) åpner et tapp hvor som helst i feltet enhetens innebygde datovelger i stedet. Flagget er kun aktivt på touch-enheter — på desktop har det ingen effekt, så du kan sette det uten å endre skrivbar-oppførselen der. Test det med mobil-emulering i nettleseren.
Result
Loading...
Kode
Live Editor
<VStack> <DateField label="Fødselsdato" description="dd.mm.åååå" openLabel="Åpne kalender" nativePickerOnMobile /> </VStack>
Native skjema-innsending
DateField sperrer ikke for vanlige HTML-skjemaer. name når den genererte native date-inputen, som bærer ISO-verdien — så et server-side skjema med method="post" mottar åååå-mm-dd:
<form method="post" action="/registrer">
<ix-field>
<label for="fodt-form">Fødselsdato</label>
<span data-field="description">dd.mm.åååå</span>
<ix-date-field class="ix-date-field" data-open-label="Åpne kalender" name="fodt">
<div class="ix-text-field">
<input id="fodt-form" inputmode="numeric" data-format="date" />
</div>
</ix-date-field>
</ix-field>
<button type="submit">Send</button>
</form>
Retningslinjer
Vis alltid formatet som tekst
Skriv dd.mm.åååå i description. Formateringen vises først når brukeren begynner å taste, så den er ikke et fullgodt format-hint alene. Ikke bruk placeholder til dette.
Bruk min og maks fremfor etterkontroll der det går
Når gyldige datoer har en naturlig grense (f.eks. ikke frem i tid), sett min/max slik at OS-kalenderen sperrer dem. Regler som ikke kan uttrykkes med et intervall — enkeltdager, helger — valideres på blur/innsending med en errorMessage.
Én dato per felt
Trenger du et intervall, bruk to separate datofelter med hver sin label («Fra» og «Til»).
Kjent begrensning (fase 1)
Denne versjonen støtter min/max, men ikke sperring av enkeltdager eller helger, og bruker enhetens innebygde kalender. En egen kalendervelger for desktop med fler-års-navigasjon er planlagt i en senere fase. På desktop åpner kalenderknappen velgeren via showPicker(); på de eldste nettleserne i baselinen vår (Safari 15.4, Firefox 100) uten showPicker() kan desktop-brukeren i stedet navigere med tastatur og taste datoen direkte.
Universell utforming
Hva du selv må sørge for
- Skriv en beskrivende label. «Fødselsdato», ikke «Velg dato». Alle datofelter må ha en label, synlig eller via
ariaLabel. - Oppgi formatet som synlig tekst i
description(dd.mm.åååå) — ikke som placeholder. - Send inn oversatt
openLabel(HTML:data-open-label). Det blir kalenderknappens tilgjengelige navn og har ingen innebygd fallback. - Skriv gode feilmeldinger. Formateringen validerer ikke; valider på blur/innsending og forklar hva som er galt.
Hva komponenten gjør automatisk
- Kobler label til den synlige inputen via
for/id, og hjelpetekst/feilmelding viaaria-describedby(ix-field). - Genererer en
<button>for kalenderen med tilgjengelig navn fraopenLabel, og enaria-hiddennative date-input som bærer ISO-verdien. - Reserverer plass til kalenderikonet i feltet og speiler
min/max/disabled/readonlytil den native inputen. - Synkroniserer den tastede
dd.mm.åååå-verdien og den native ISO-verdien begge veier, og emitter énchangeper faktisk endring. - På touch-enheter skjules kalenderknappen fra skjermleser slik at tap på den native inputen er primær interaksjon.
Tastaturnavigasjon
| Tast | Handling |
|---|---|
| Tab | Flytter fokus til inputfeltet, deretter til kalenderknappen (kun desktop) |
| Shift+Tab | Flytter fokus til forrige fokuserbare element |
| Sifre | Skriver datoen (1.1.2026 eller 01.01.2026); feltet normaliserer til dd.mm.åååå når det mister fokus |
| Enter / Mellomrom | Åpner OS-kalenderen når kalenderknappen har fokus |
Skjermleser
- Ved fokus på feltet: "[label], rediger tekst, [hjelpetekst]"
- På desktop: kalenderknappen er et eget tab-stopp og leses som "[openLabel], knapp" — Enter/Mellomrom åpner kalenderen. På touch er knappen tabindex=-1 og skjult for skjermleser; datoen tastes i feltet og et tapp åpner den native velgeren
- Ved feil: "[label], ugyldig, rediger tekst, [feilmelding]"
- Med skjult label: "[label], rediger tekst" — labelen leses opp selv om den ikke er synlig
WCAG-kriterier
Sist gjennomgått: 2026-07-29 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier9 ditt ansvar · 17 håndtert · 32 ikke relevant · 0 ikke på plass
Ditt ansvar (9)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 2.4.6 Overskrifter og ledetekster | AA | Skriv beskrivende labeltekst. Labelen skal forklare hvilken dato feltet gjelder — ikke handlingen. "Fødselsdato" er bedre enn "Velg dato". Alle datofelter må ha en label, enten synlig (label) eller skjult (ariaLabel). |
| 3.3.2 Ledetekster eller instruksjoner | A | Skriv beskrivende labeltekst. Labelen skal forklare hvilken dato feltet gjelder — ikke handlingen. "Fødselsdato" er bedre enn "Velg dato". Alle datofelter må ha en label, enten synlig (label) eller skjult (ariaLabel). |
| 3.3.1 Identifikasjon av feil | A | Oppgi forventet format som synlig tekst. Feltet normaliserer det brukeren taster til dd.mm.åååå når feltet mister fokus, men formatet må også stå som synlig hjelpetekst i description (f.eks. "dd.mm.åååå"). Normaliseringen alene er ikke nok — den skjer først på blur, og teksten står urørt mens man skriver. Ikke bruk placeholder til dette; den forsvinner idet brukeren skriver og har svak kontrast. |
| 3.3.2 Ledetekster eller instruksjoner | A | Oppgi forventet format som synlig tekst. Feltet normaliserer det brukeren taster til dd.mm.åååå når feltet mister fokus, men formatet må også stå som synlig hjelpetekst i description (f.eks. "dd.mm.åååå"). Normaliseringen alene er ikke nok — den skjer først på blur, og teksten står urørt mens man skriver. Ikke bruk placeholder til dette; den forsvinner idet brukeren skriver og har svak kontrast. |
| 3.1.1 Språk på siden | A | Send inn oversatt tekst for kalenderknappen. openLabel (HTML: data-open-label) blir aria-label på kalenderknappen og leses av skjermlesere. Komponenten har ingen innebygd fallback — send inn riktig streng for språket ditt (bokmål, nynorsk, engelsk), f.eks. "Åpne kalender". Uten tekst varsler web-komponenten i utviklingsbygg. |
| 4.1.2 Navn, rolle, verdi | A | Send inn oversatt tekst for kalenderknappen. openLabel (HTML: data-open-label) blir aria-label på kalenderknappen og leses av skjermlesere. Komponenten har ingen innebygd fallback — send inn riktig streng for språket ditt (bokmål, nynorsk, engelsk), f.eks. "Åpne kalender". Uten tekst varsler web-komponenten i utviklingsbygg. |
| 3.3.1 Identifikasjon av feil | A | Skriv gode feilmeldinger. Feilmeldingen må si hva som er galt og hva brukeren skal gjøre. "Datoen må være etter 01.01.2020" — ikke "Ugyldig dato". Formateringen validerer ikke: feltet avviser aldri tastetrykk, så valider på blur/innsending med en egen errorMessage. |
| 3.3.3 Forslag ved feil | AA | Skriv gode feilmeldinger. Feilmeldingen må si hva som er galt og hva brukeren skal gjøre. "Datoen må være etter 01.01.2020" — ikke "Ugyldig dato". Formateringen validerer ikke: feltet avviser aldri tastetrykk, så valider på blur/innsending med en egen errorMessage. |
| 3.3.1 Identifikasjon av feil | A | Bruk min/max for å avgrense datoer. min og max (ISO, åååå-mm-dd) speiles til den native date-inputen og sperrer utenforliggende datoer i OS-kalenderen. Sperring av enkeltdager eller helger støttes ikke i denne fasen — håndter slik validering med en egen errorMessage på blur/innsending. |
Håndtert av komponenten (17)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Label kobles til den synlige inputen via for/id (ix-field). Hjelpetekst og feilmelding kobles via aria-describedby. Den genererte native date-inputen bærer ISO-verdien for form-innsending og er aria-hidden; kalenderknappen har role=button med tilgjengelig navn. |
| 1.3.2 Meningsfull rekkefølge | A | Label, input, hjelpetekst og feilmelding følger naturlig rekkefølge i DOM. |
| 1.3.3 Sensoriske egenskaper | A | Feiltilstand bruker tekst, ramme og aria-invalid — ikke farge alene. |
| 1.3.5 Identifiser formål med inndata | AA | Kan kombineres med autocomplete="bday" på den synlige inputen for datofelt som ber om personlig informasjon. |
| 1.4.1 Bruk av farge | A | Feiltilstand kommuniseres med farge, rammeendring og tekstlig feilmelding. Kalenderikonet er en dekorativ CSS-maske med aria-hidden på knappen som har eget tekstnavn. |
| 1.4.4 Endre tekststørrelse | AA | Relative enheter — skalerer korrekt ved 200 % zoom. |
| 1.4.10 Omflyt | AA | Reflower korrekt ned til 320px viewport uten horisontal scroll. |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Ramme, fokusindikator og kalenderikon oppfyller 3:1 kontrastkrav. |
| 1.4.12 Tekstavstand | AA | Tåler økt line-height, bokstav- og ordavstand uten tap av innhold. |
| 2.1.1 Tastatur | A | Å velge dato er fullt opererbart med tastatur på to måter: (1) tast datoen i den synlige inputen — feltet er skilletegn-bevisst (godtar 1.1.2026), avviser aldri tastetrykk, lar teksten stå urørt mens man skriver og normaliserer til dd.mm.åååå på blur; (2) tab til kalenderknappen og trykk Enter/Mellomrom for å åpne OS-kalenderen (showPicker() utløses av tastaturaktiveringen). På desktop er knappen i tab-rekkefølgen. På touch er knappen tabindex=-1 og aria-hidden — der er tasting i feltet primærveien og et tapp åpner den native velgeren. Den overlagte native date-inputen er alltid tabindex=-1, så den lager aldri et ekstra tab-stopp. |
| 2.1.2 Ingen tastaturfelle | A | Fokus kan navigeres ut med Tab og Shift+Tab. Kalenderknappen (desktop) og inputen er vanlige fokuserbare kontroller uten fokusfeller; den overlagte native inputen er tabindex=-1 og fanger aldri fokus. |
| 2.4.3 Fokusrekkefølge | A | På desktop to tab-stopp i naturlig DOM-rekkefølge: den synlige inputen, deretter kalenderknappen. På touch ett tab-stopp (knappen er tabindex=-1). Den overlagte native inputen er alltid tabindex=-1. |
| 2.4.7 Synlig fokus | AA | Tydelig fokusindikator på inputfeltet (arves fra text-field) og på kalenderknappen (focus-visible med --ix-outline-default), så tastaturbrukere ser hvor fokus står når de tabber til knappen på desktop. |
| 2.5.8 Målstørrelse (minimum) | AA | Kalenderknappen oppfyller minimum 44x44px klikkflate; den overlagte native inputen dekker samme flate. |
| 3.2.1 Ved fokus | A | Fokus alene trigger ingen kontekstendring — kalenderen åpnes først ved klikk/tap på kalenderknappen (eller den overlagte native inputen). |
| 3.2.2 Ved inndata | A | Feltet endrer aldri teksten mens man skriver; det normaliserer til dd.mm.åååå først når feltet mister fokus, og bytter aldri fokus eller side. Kalendervalg fyller feltet uten uventet kontekstendring. |
| 4.1.2 Navn, rolle, verdi | A | Native tekst-input og native date-input med implisitte roller. Kalenderknappen er en native button med tilgjengelig navn fra openLabel/data-open-label. Tilstander (disabled, readonly, invalid) eksponeres korrekt. |
Ikke relevant (32)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Kalenderikonet er en dekorativ CSS-maske med aria-hidden; knappen har eget tekstnavn. |
| 1.2.1 Bare lyd og bare video (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.2 Teksting (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.4 Teksting (direkte) | AA | Ingen medieelementer. |
| 1.2.5 Synstolking (forhåndsinnspilt) | AA | Ingen medieelementer. |
| 1.3.4 Visningsretning | AA | Ingen fast orientering — tilpasser seg visningsretning. |
| 1.4.2 Styring av lyd | A | Ingen lydelementer. |
| 1.4.5 Bilder av tekst | AA | Ingen bilder av tekst. |
| 1.4.13 Innhold ved hover eller fokus | AA | Ingen hover-/fokus-utløst innhold som forsvinner; hjelpetekst er persistent. |
| 2.1.4 Tastatursnarveier | A | Ingen egendefinerte tastatursnarveier. |
| 2.2.1 Justerbar hastighet | A | Ingen tidsbegrensede funksjoner. |
| 2.2.2 Pause, stopp, skjul | A | Ingen animasjon eller automatisk oppdatering. |
| 2.3.1 Terskelverdi på tre glimt | A | Ingen blinkende eller glimtende innhold. |
| 2.4.1 Hoppe over blokker | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.2 Sidetitler | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.4 Formål med lenke (i kontekst) | A | Ingen lenker i komponenten. |
| 2.4.5 Flere måter | AA | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.11 Fokus ikke skjult (minimum) | AA | Ingen sticky/overlappende elementer som kan skjule fokus. |
| 2.5.1 Pekerbevegelser | A | Ingen bevegelsesbaserte gester — alt betjenes med enkle trykk/klikk. |
| 2.5.2 Avbryt peker | A | |
| 2.5.4 Bevegelsesaktivering | A | Ingen bevegelsesaktivering. |
| 2.5.6 Samtidige inndatamekanismer | A | |
| 2.5.7 Drabevegelser | A | Ingen drag-and-drop. |
| 3.1.2 Språk på deler av innhold | AA | Komponenten setter ikke lang-attributt — innhold er på sidespråket. |
| 3.2.3 Konsistent navigasjon | AA | Sidekrav — gjelder ikke enkeltkomponenter. |
| 3.2.4 Konsistent identifikasjon | AA | Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter. |
| 3.2.6 Konsistent hjelp | A | Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider. |
| 3.3.4 Forhindring av feil (juridisk, økonomisk, data) | AA | Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter. |
| 3.3.7 Redundant oppføring | A | Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess. |
| 3.3.8 Tilgjengelig autentisering (minimum) | AA | Ikke en autentiseringskomponent. |
| 4.1.3 Statusmeldinger | AA | Feilmeldinger håndteres via ix-field sin aria-live="polite" (dekket av 3.3.1). Ingen øvrige statusmeldinger. |
Tilpasning med CSS
Trenger du ix-date-field-stylingen på HTML du setter sammen selv — uten React-komponenten — bruker du klassene direkte. Den synlige inputen gjenbruker .ix-text-field; kalenderknappen og den native inputen genereres av web-komponenten og trenger ikke skrives for hånd.
Tilgjengelige klasser og selektorer
| Element | Selektor |
|---|---|
| Rot | .ix-date-field |
| Tekstfelt-wrapper | .ix-text-field |
| Synlig input | .ix-date-field .ix-text-field > input |
| Kalenderknapp (generert) | .ix-date-field__toggle |
| Native date-input (generert) | .ix-date-field__native |
| Label | .ix-label |
| Hjelpetekst | [data-field="description"] |
| Feilmelding | [data-field="error"] |
Props / API
DateFieldProps
| Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
label | string | Nei* | Synlig labeltekst. Anbefalt fremfor ariaLabel | |
ariaLabel | string | Nei* | Skjult label for skjermlesere. *Enten label eller ariaLabel må settes | |
openLabel | string | Ja | aria-label på kalenderknappen (i18n) | |
name | string | Nei | Navn på det innsendte feltet. Verdien er ISO (åååå-mm-dd) | |
value | string | Nei | Kontrollert verdi i ISO. Kombiner med onChange | |
defaultValue | string | Nei | Ukontrollert startverdi i ISO | |
onChange | (value: string) => void | Nei | Kalles med ny verdi i ISO (tom streng når ufullstendig) | |
min | string | Nei | Tidligste valgbare dato i ISO | |
max | string | Nei | Seneste valgbare dato i ISO | |
description | string | Nei | Hjelpetekst under label (bruk til formathint) | |
errorMessage | string | Nei | Feilmelding. Trigger aria-invalid når den har innhold | |
disabled | boolean | Nei | Deaktiverer feltet | |
readOnly | boolean | Nei | Skrivebeskyttet felt | |
required | boolean | Nei | Markerer feltet som påkrevd | |
nativePickerOnMobile | boolean | Nei | false | Tapp åpner OS-velgeren hvor som helst i feltet. Kun aktivt på touch |
tooltip | string | Nei | Tooltip-tekst ved label | |
tooltipLabel | string | Nei | aria-label på tooltip-knappen (i18n) | |
tooltipPlacement | string | Nei | Plassering av tooltip | |
className | string | Nei | CSS-klasse på ytterste wrapper (.ix-field) | |
id | string | Nei | Id på inputfeltet. Genereres automatisk om utelatt | |
ref | Ref<IxDateField> | Nei | Ref videresendes til <ix-date-field>-elementet |
Relatert
- TextField — for fritekst uten datospesifikk formatering
- Formatering av tekstfelt — samme
data-format-motor DateField bygger på