digdir · mrosvik · Feb 5, 2026 · Feb 5, 2026 · Feb 5, 2026 · Feb 6, 2026
@@ -1,7 +1,7 @@
 ---
 title: Button placement and order
 sidebar_title: Button placement
-category: Upcoming
+category: Upcoming patterns
 description: How can we create a more predictable and inclusive experience by standardizing button placement and order?
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: placement, order

@@ -0,0 +1,15 @@
+---
+title: Ask users for date and time
+sidebar_title: Date and time
+category: Ask users for...
+description: Date and time can often be solved more simply than many people think.
+partners: Digdir, Brønnøysundregistrene
+date: 2026-02-05
+order: 10
+---
+
+Asking users for date and time is often solved in a more complex way than necessary. In many situations, a simple [`Textfield`](link) is both faster to use and easier to understand than more advanced solutions.
+
+## Ask users for date of birth
+
+Example....
@@ -1,7 +1,7 @@
 ---
 title: User-triggered error messages
 sidebar_title: Error messages
-category: Completed
+category: Basic patterns
 description: How to tell users that something has been filled in incorrectly or is missing in a form.
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: validation

@@ -1,7 +1,7 @@
 ---
 title: Labeling Links
 description: How should we label links, and which language and design principles should we follow?
-category: Completed
+category: Basic patterns
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: linktext, target, navigation, url
 date: 2025-05-12

@@ -1,7 +1,7 @@
 ---
 title: Sign-in and representation
 sidebar_title: Representation
-category: Upcoming
+category: Upcoming patterns
 description: How do we handle switching between actors across services?
 partners: Digdir, Nav, Skatteetaten ++
 date: 2025-12-03

@@ -1,7 +1,7 @@
 ---
 title: Required and optional form fields
 sidebar_title: Required fields
-category: Completed
+category: Basic patterns
 description: To help users understand which fields must be completed, required fields must be clearly and consistently labelled.
 partners: Digdir, Nav, Skatteetaten ++
 date: 2026-02-02

@@ -1,7 +1,7 @@
 ---
 title: System notifications
 sidebar_title: System notifications
-category: Completed
+category: Basic patterns
 description: How to help users understand situations in the service that are not caused by their own actions.
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: alert, modal

@@ -1,7 +1,7 @@
 ---
 title: Plassering og rekkefølge på knapper
 sidebar_title: Plassering av knapper
-category: Kommende
+category: Kommende mønstre
 description: Hvordan kan vi skape en mer forutsigbar og inkluderende opplevelse ved å standardisere plassering og rekkefølge på knapper?
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: button, knapperekkefølge, knappplassering

@@ -0,0 +1,122 @@
+---
+title: Spør brukeren om dato og klokkeslett
+sidebar_title: Dato og klokkeslett
+category: Spør brukeren om...
+description: Å spørre brukeren om dato og klokkeslett blir ofte løst mer komplisert enn nødvendig. I mange situasjoner er vanlige input-felt både raskere å bruke og lettere å forstå enn egenbygde datovelgere. 
+partners: Digdir, Brønnøysundregistrene
+date: 2026-02-05
+order: 10
+---
+
+Hvordan du ber brukeren om dato og klokkeslett, bør ta utgangspunkt i hvilken informasjon du faktisk trenger. Noen datoer er enkle å huske, som fødselsdato, mens andre må leses fra dokumenter eller kort. I noen situasjoner holder det med en omtrentlig dato, som «desember 2017», eller en dato i forhold til i dag, som «4 dager fra nå». Andre ganger skal brukeren velge en dato eller et tidspunkt fra et forhåndsdefinert utvalg.
+
+Unngå å gjøre oppgaven mer komplisert enn nødvendig. Avanserte datovelgere gir ofte lavere tilgjengelighet og mer friksjon enn enkle tekstfelt.
+
+## Kjente datoer
+
+Når du spør om kjente datoer, som fødselsdato eller bryllupsdato, fungerer enkle tekstfelt godt. Brukeren vet allerede svaret og ønsker ofte å skrive det direkte, uten å måtte navigere i en kalender.
+
+Del gjerne datoen opp i separate felt for dag, måned og år. Det gjør det enklere å skrive inn datoen korrekt og gir bedre støtte for hjelpemidler.
+
+<Image
+  src='/img/date-and-time/example1.webp'
+  alt='Tre separate felt for dag, måned og år'
+  boxShadow={false}
+/>
+
+Når du ber brukeren om en dato slik den står i et bankkort, pass eller annet dokument, bør feltene samsvare med formatet i dokumentet. Det gjør det enklere å overføre datoen korrekt og reduserer risikoen for feil.
+
+## Konkret dato i nær fremtid eller fortid
+
+I noen tilfeller skal brukeren velge en konkret dato tett opp mot dagens dato, for eksempel ved bestilling av time eller valg av frist. Da kan det være nyttig med visuell støtte. Et [`Textfield`](link) med `type="date"` lar brukeren enten skrive datoen direkte eller bruke nettleserens innebygde datovelger. Dette gir ofte en god balanse mellom fleksibilitet og støtte. Merk at utseende og interaksjon vil variere mellom nettlesere og enheter.
+
+<Image
+  src='/img/date-and-time/example2.webp'
+  alt='Tekstfelt med innebygd datovelger'
+  boxShadow={false}
+/>
+
+## Start- og sluttdato
+
+Når brukeren skal oppgi en periode, bør startdato og sluttdato vises tydelig sammen. Bruk to separate felt, og gjør det klart hvilken dato som er hvilken.
+
+Plasser feltene i logisk rekkefølge, og valider at sluttdato ikke er før startdato. Hvis datoene avhenger av hverandre, bør feilmeldinger forklare hva som er galt og hvordan brukeren kan rette det.
+
+<Image
+  src='/img/date-and-time/example3.webp'
+  alt='Tekstfelt for startdato og sluttdato'
+  boxShadow={false}
+/>
+
+## Klokkeslett – start og slutt
+
+Når brukeren skal oppgi et tidsintervall, som åpningstid eller varighet på et møte, fungerer et [`Textfield`](link) med `type="time"` godt. Det lar brukeren skrive klokkeslettet direkte, samtidig som nettleseren kan tilby passende hjelp.
+
+Bruk separate felt for start- og sluttid, og vis dem tydelig sammen.
+
+<Image
+  src='/img/date-and-time/example4.webp'
+  alt='To tekstfelt for start- og sluttid'
+  boxShadow={false}
+/>
+
+## Omtrentlig tidspunkt
+Gi brukeren mulighet til å oppgi en omtrentlig dato eller et tidspunkt når de ikke nødvendigvis vet eller husker nøyaktig. Dette er særlig relevant når hendelsen ligger lengre tilbake i tid.
+
+For eksempel kan du la brukeren skrive «desember 2025» i et felt som spør etter når ulykken skjedde, eller tilby egne felt for måned og år.
+
+<Image
+  src='/img/date-and-time/example5.png'
+  alt='Felt for måned og år'
+  boxShadow={false}
+/>
+Hvis brukeren bare trenger å oppgi måned og år, bør det være mulig å gjøre nettopp det.
+
+## Dato relativt til en annen dato
+
+I noen situasjoner er det mer naturlig å spørre om datoer relativt til i dag eller til en annen dato, for eksempel når brukeren setter opp en påminnelse. Da kan det være bedre å bruke en [`Select`](link) for å gi brukeren valg om «i morgen», «om 3 dager» eller «1 dag før». Hvis ukedag er viktig for oppgaven, bør denne vises tydelig i tillegg.
+
+<Image
+  src='/img/date-and-time/example6.png'
+  alt='Valg av relative datoer'
+  boxShadow={false}
+/>
+
+## Dato fra et forhåndsdefinert utvalg
+
+Hvis du vet at brukeren skal velge en dato eller et tidspunkt fra et begrenset utvalg, for eksempel ledige timer den kommende uken, kan det være mer effektivt å tilby disse som ferdige valg.
+
+Bruk en [`Select`](link) eller [`Radio`](link) når antallet valg er lavt. Det gjør det raskt og enkelt å velge riktig alternativ uten å måtte skrive noe selv.
+
+Når utvalget er svært begrenset, for eksempel noen få datoer eller tidspunkter, kan [`Radio`](link) være et godt valg. Brukerne ser alle alternativene samtidig og kan raskt sammenligne dem før de velger.
+
+<Image
+  src='/img/date-and-time/example7.webp'
+  alt='Forhåndsdefinert utvalg datoer eksempel 1'
+  boxShadow={false}
+/>
+
+Når antall valg øker, kan en Select for å begrense utvalget være nyttig først. Den tar mindre plass og gjør det enklere å håndtere flere alternativer uten at siden blir uoversiktlig.
+
+<Image
+  src='/img/date-and-time/example8.webp'
+  alt='Forhåndsdefinert utvalg datoer eksempel 2'
+  boxShadow={false}
+/>
+
+Når det finnes mange mulige datoer eller tidspunkter, bør du hjelpe brukeren med å avgrense valgene før de presenteres. Dette kan gjøres på mange måter, for eksempel med Select slik som i eksempelet under.
+
+<Image
+  src='/img/date-and-time/example9.webp'
+  alt='Forhåndsdefinert utvalg datoer eksempel 3'
+  boxShadow={false}
+/>
+
+Du bør kun vise tidspunkter som faktisk kan velges, og forklare hvorfor de andre datoene ikke vises.
+
+[Eksempel på datoer som kan og ikke kan velges. En kalender vises]
+
+## Kilder og relevant informasjon
+- [Who needs a JavaScript date picker? (dbushell.com)](https://pikaday.dbushell.com/)
+- [Maybe You Don’t Need a Date Picker (adrianroselli.com)](https://adrianroselli.com/2019/07/maybe-you-dont-need-a-date-picker.html)
+- [Ask users for dates (gov.uk)](https://design-system.service.gov.uk/patterns/dates/)
@@ -1,7 +1,7 @@
 ---
 title: Brukerutløste feilmeldinger
 sidebar_title: Feilmeldinger
-category: Ferdig
+category: Grunnleggende mønstre
 description: Slik forteller du brukeren at noe er fylt ut feil eller mangler i et skjema.
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: validation, validering, feil

@@ -1,7 +1,7 @@
 ---
 title: Merking av lenker
 description: Hvordan merke lenker og hvilke språk- og designprinsipper bør vi følge?
-category: Ferdig
+category: Grunnleggende mønstre
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: url, lenketekst, ekstern
 date: 2025-05-12

@@ -1,7 +1,7 @@
 ---
 title: Innlogging og representasjon
 sidebar_title: Representasjon
-category: Kommende
+category: Kommende mønstre
 description: Hvordan håndterer vi aktørbytte på tvers av tjenester?
 partners: Digdir, Nav, Skatteetaten ++
 date: 2025-12-03

@@ -1,7 +1,7 @@
 ---
 title: Obligatoriske og valgfrie skjemafelt
 sidebar_title: Obligatoriske felt
-category: Ferdig
+category: Grunnleggende mønstre
 description: For at brukerne skal forstå hvilke felter som må fylles ut, må obligatoriske felt merkes tydelig og konsekvent.
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: required, optional, påkrevd, valgfritt

@@ -1,7 +1,7 @@
 ---
 title: Systemvarsler
 sidebar_title: Systemvarsler
-category: Ferdig
+category: Grunnleggende mønstre
 description: Slik hjelper du brukerne å forstå situasjoner i tjenesten som ikke skyldes deres egne handlinger.
 partners: Digdir, Nav, Skatteetaten ++
 search_terms: alert, modal, systemvarsel, systemmelding

@@ -38,15 +38,15 @@ export const loader = async ({ params: { lang } }: Route.LoaderArgs) => {
   } = {};
 
   if (lang === 'no') {
-    cats.Ferdig = [];
-    cats['Under arbeid'] = [];
-    cats.Kommende = [];
+    cats['Grunnleggende mønstre'] = [];
+    cats['Spør brukeren om...'] = [];
+    cats['Kommende mønstre'] = [];
   }
 
   if (lang === 'en') {
-    cats.Completed = [];
-    cats['Under construction'] = [];
-    cats.Coming = [];
+    cats['Basic patterns'] = [];
+    cats['Ask users for...'] = [];
+    cats['Upcoming patterns'] = [];
   }
 
   /* Map over files with mdx parser to get title */