DatePicker
Datovelgeren gir brukerne mulighet til å skrive inn eller velge en dato. Ledeteksten beskriver hvilken dato brukeren skal fylle inn. To datovelgere kan brukes sammen for å angi perioder.
Du finner et eksempel på datovelger brukt i skjemakontekst under Profil og Skjemadesign. Koden til eksempelet finner du på GitHub.
Typer og bruk
- Enkel datovelger, til når brukeren skal velge en dato som er nær dagens dato
- Utvidet datovelger, til når brukeren skal velge en dato som ligger mer enn ett år frem eller tilbake i tid
Vi kan også bruke to datovelgere, når vi vil at brukeren skal angi en periode med fra- og tildato. For eksempel "Hvor lenge var du syk da du var på ferie? Velg dato fra og til".
Tekst og validering
Velg størrelse på ledeteksten etter prinsippene for skjemadesign. Bruk en kort og tydelig ledetekst, som forteller hva brukeren skal velge. Hvis det trengs, kan du også gi mer forklaring med en hjelpetekst under feltet.
Hvis datovelgeren ikke validerer, vises en feilmelding, som forteller hva som er galt. Merk at feilmeldingen erstatter en eventuell hjelpetekst, slik at den feilmeldingen du lager også må fortelle hva hjelpeteksten var.
Riktig
Hjelpetekst i feilmelding
Feil
Feilmelding uten hjelp
React API
Her finner du en oversikt over props på komponentene i pakken.
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
name | ingen | Ikke påkrevd | string | undefined | |
label | Velg dato | Ikke påkrevd | string | undefined | |
labelProps | ingen | Ikke påkrevd | Omit<LabelProps, "children" | "forceCompact"> | undefined | |
monthLabel | ingen | Ikke påkrevd | string | undefined | |
yearLabel | ingen | Ikke påkrevd | string | undefined | |
placeholder | dd.mm.åååå | Ikke påkrevd | string | undefined | |
months | ingen | Ikke påkrevd | string[] | undefined | |
days | ingen | Ikke påkrevd | string[] | undefined | |
calendarButtonTitle | ingen | Ikke påkrevd | string | undefined | |
showCalendarLabel | calendarButtonTitle || "Åpne kalender" | Ikke påkrevd | string | undefined | |
hideCalendarLabel | calendarButtonTitle || "Lukk kalender" | Ikke påkrevd | string | undefined | |
initialDate | ingen | Ikke påkrevd | Date | undefined | |
value | ingen | Ikke påkrevd | Date | undefined | |
extended | ingen | Ikke påkrevd | boolean | undefined | |
initialShow | false | Ikke påkrevd | boolean | undefined | |
className | ingen | Ikke påkrevd | string | undefined | |
helpLabel | ingen | Ikke påkrevd | string | undefined | |
errorLabel | ingen | Ikke påkrevd | string | undefined | |
variant | @deprecated Bruk `labelProps.variant` | ingen | Ikke påkrevd | LabelVariant | undefined |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
disableBeforeDate | ingen | Ikke påkrevd | Date | undefined | |
disableAfterDate | ingen | Ikke påkrevd | Date | undefined | |
width | 11.5rem | Ikke påkrevd | string | undefined | |
onChange | ingen | Ikke påkrevd | onChangeEventHandler | undefined | |
onFocus | ingen | Ikke påkrevd | onFocusEventHandler | undefined | |
onBlur | ingen | Ikke påkrevd | onBlurEventHandler | undefined | |
onKeyDown | ingen | Ikke påkrevd | onKeyDownEventHandler | undefined | |
data-testautoid | ingen | Ikke påkrevd | string | undefined |
Arvede props
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
ref | ingen | Ikke påkrevd | Ref<HTMLElement> | undefined | |
key | ingen | Ikke påkrevd | Key | null | undefined |