DatePicker

DatePicker brukes når brukeren skal velge en spesifikk dato, eventuelt med tidspunkt. Komponenten egner seg godt for skjemaer der datoen er en sentral del av flyten, som billettbestilling, bookinger eller rapportering.

Bruk DatePicker når brukeren trenger visuell støtte fra en kalender for å velge dato. Bruk DateField alene dersom brukeren kjenner datoen de skal skrive inn (f.eks. fødselsdato), og ikke har behov for kalendervisning.

Ønsker man en OS-spesifikk opplevelse kan man bruke NativeDatePicker. Denne bruker operativsystemets innebygde datovalg og egner seg best for enkle tilfeller der man ønsker kjent mobilopplevelse.

Tidspunkt kan legges til på to måter: enten direkte i DatePicker, eller som en separat TimePicker ved siden av. I løsninger ut mot vanlige sluttbrukere er en separat dato- og tidvelger foretrukket — det gir en tydeligere flyt.

På smale skjermer (under 1000px) vises kalenderen i en modal i stedet for en popover, slik at hele datovelgeren alltid er synlig. Denne oppførselen kan slås av — se Utvikling-fanen for detaljer.

Begrens tilgjengelige datoer slik at brukeren ikke kan velge ugyldige datoer. Du kan sette et tidligste og seneste gyldig dato, eller markere spesifikke datoer som utilgjengelige (f.eks. helger). Gi tydelig tilbakemelding når en ugyldig dato er valgt. Se Utvikling-fanen for ulike valideringsmetoder.

Trenger brukeren å velge en periode (fra- og til-dato), bruk RangeCalendar i stedet.

Ønsker du en alltid synlig kalender uten inputfelt, se Calendar.

Hvert datosegment er tilgjengelig med tastaturet og alle interagerbare elementer har beskrivelser for skjermlesere. Støtte for universell utforming håndteres automatisk av komponenten.

Ved bruk av andre språk enn norsk og engelsk må du sørge for å sende inn navigasjonsbeskrivelse på riktig språk. Se Utvikling-fanen for hvordan du konfigurerer dette.

DatePicker bruker @internationalized/date til håndtering av datoobjekter, inkludert tidssoner. Den bygger på react-aria og støtter det meste av funksjonalitet du finner der.

Språk styres gjennom prop-en locale (BCP 47-format, f.eks. nb-NO). Som default brukes maskinens locale. Ledeteksten (label) og navigationDescription må sendes inn manuelt for andre språk enn norsk og engelsk.

Begrens tilgjengelige datoer med minDate og maxDate, eller bruk isDateUnavailable for mer fleksibel validering.

Denne komponenten har ingen props

Denne komponenten har ingen props

Denne komponenten har ingen props