DatePicker

Egnet til:

• å tilrettelegge for at bruker skal velge en spesifikk dato, fortrinnsvis nært i tid.
• tilfeller der det er begrensninger i hvilke dager som kan velges.
• hvis det er nyttig å se ukedager når man velger dato
• når bruker ikke kan forventes å huske eksakt dato.

Uegnet til:

• å valge av datoer langt tilbake eller frem i tid.
• å valge kjente datoer, for eksempel fødselsdato.
• å velge klokkeslett.
• å velge kun årstall uten måned og dag.

Teknisk dokumentasjon

Se DatePicker i Storybook for tekniske detaljer.

Varianter

DatePicker kommer i normal og stor variant. 

Eksempel: datovelger i to størrelser

Hvordan bruke komponenten  

Taste datoer

Datovelgeren lar brukeren enten skrive inn datoen direkte i inputfeltet eller velge dato fra kalenderen. Når brukeren skriver inn datoer, vil vi være fleksible med formatet. For eksempel, hvis brukeren skriver “1705” og navigerer ut av feltet, vil datovelgeren automatisk anta at datoen er 17. mai inneværende år.

• Se oppsett for hvordan vi skriver datoer i skrivereglene i Skatteetaten.
• Se teknisk informasjon om datoformat i api-dokumentasjon for datovelger.

Begrense datoer

Du kan begrense hvilke datoer som kan velges på to måter:

1. Angi en periode ved å sette start- og sluttdatoer.
2. Utelukke enkelte datoer fra kalenderen.

Når du begrenser datoer, vil de ikke-valgbare datoene i kalenderen bli grået ut. Du må gi en fornuftig feilmelding hvis brukeren skriver inn en dato som er utenfor de tillatte grensene.

Se eksempel som viser hvordan en slik feilmelding settes opp i komponenten.

Vurder om Datepicker er den rette løsningen for deg

Datovelgeren gjør det enkelt for brukeren å finne datoer innenfor en tidsramme, men kan være utfordrende hvis tidsrommet er stort. Kalenderen starter på et gitt år, og for å velge et annet år må brukeren enten skrive inn det nye året eller bla måned for måned. Å bruke datovelgeren kan være komplekst, og ofte vil det være enklere for brukeren å skrive inn datoen manuelt i et vanlig tekstfelt. 

Alternativ: dato i TextField

Universell utforming  

• Kalenderen kan kun åpnes med kalenderknappen, ikke via feltet.
• Skjermleser vil lese komplett dato i tabellen med dager.