Props

Prop:

name?

Type:

string

Beskrivelse:

Navn som brukes i skjema ved innsending

Prop:

form?

Type:

string

Beskrivelse:

ID-en til skjemaet feltet hører til, når feltet ligger utenfor skjemaet

Prop:

label

Type:

string

Beskrivelse:

Tekst som vises over feltet. Påkrevd i React. Elements bruker «Datovelger» hvis den mangler.

Prop:

helptext?

Type:

string

Beskrivelse:

Hjelpetekst som vises over feltet

Prop:

helptextDropdown?

Type:

string

Beskrivelse:

Hjelpetekst som vises i en lukket boks man kan åpne

Prop:

helptextDropdownButton?

Status:

Deprecated Bruk strings={{ forms: { readMore: '…' } }} eller setPktStrings().

Type:

string

Beskrivelse:

Tekst på knappen som åpner og lukker den utvidede hjelpeteksten

Prop:

dateformat?

Type:

string

Standardverdi:

"dd.MM.yyyy"

Beskrivelse:

Formatet datoene vises i, i taggene ved flervalg

Prop:

currentmonth?

Type:

ISOdatestring

Beskrivelse:

Måneden kalenderen åpner på, som ISO-dato

Prop:

value?

Type:

ISOdatestring

Beskrivelse:

Valgte datoer i ISO-format. Kommaseparert ved flervalg og datotidsrom. React godtar også en liste.

Prop:

excludeweekdays?

Type:

string

Beskrivelse:

Ukedager (1-7) som ikke kan velges. Kommaseparert i Elements, en liste i React.

Prop:

excludedates?

Type:

ISOdatestring

Beskrivelse:

Datoer som ikke kan velges. Kommaseparert i Elements, en liste i React.

Prop:

min?

Type:

ISOdatestring

Beskrivelse:

Tidligste dato som kan velges, som ISO-dato

Prop:

max?

Type:

ISOdatestring

Beskrivelse:

Seneste dato som kan velges, som ISO-dato

Prop:

weeknumbers?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser ukenummer i kalenderen

Prop:

withcontrols?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser nedtrekkslister for måned og år i kalenderen

Prop:

multiple?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Lar brukeren velge flere datoer

Prop:

maxlength?

Type:

number

Beskrivelse:

Største antall datoer som kan velges ved flervalg. Viser en teller. 0 betyr ingen grense.

Prop:

range?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Lar brukeren velge en fra-dato og en til-dato

Prop:

showRangeLabels?

show-range-labels?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser «Fra» og «Til» foran feltene i et datotidsrom

Prop:

today?

Type:

ISOdatestring

Beskrivelse:

ISO-datostreng som overstyrer dagens dato i kalenderen. Nyttig for snapshot-tester.

Prop:

calendarOpen?

calendar-open?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Om kalenderen er åpen

Prop:

hasError?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Indikerer om feltet har en feil

Prop:

errorMessage?

Type:

string

Beskrivelse:

Tekst som vises under feltet ved feiltilstand

Prop:

disabled?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Indikerer om feltet er deaktivert

Prop:

fullwidth?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Indikerer om feltet skal ta opp full bredde

Prop:

inputSize?

input-size?

Type:

"xsmall" | "small" | "medium"

Standardverdi:

"medium"

Beskrivelse:

Størrelsen på komponenten

Prop:

required?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Er feltet påkrevd?

Prop:

requiredTag?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser en merking som indikerer at feltet er påkrevd

Prop:

requiredText?

Status:

Deprecated Bruk strings={{ forms: { required: '…' } }} eller setPktStrings().

Type:

string

Beskrivelse:

Tekst som vises i påkrevd-merkingen

Prop:

optionalTag?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser en merking som indikerer at feltet er valgfritt

Prop:

optionalText?

Status:

Deprecated Bruk strings={{ forms: { optional: '…' } }} eller setPktStrings().

Type:

string

Beskrivelse:

Tekst som vises i valgfritt-merkingen

Prop:

tagText?

Type:

string

Beskrivelse:

Tekst som vises i en tag ved siden av label

Prop:

useWrapper?

Type:

boolean

Standardverdi:

true

Beskrivelse:

Indikerer at feltet skal ha synlig label og hjelpetekst

Prop:

id

Type:

string

Beskrivelse:

Unik identifikasjon for datovelgeren. Påkrevd i React. Elements lager en id hvis den mangler.

Prop:

ariaDescribedby?

aria-describedby?

Type:

string

Beskrivelse:

Spesifiserer ID-en til elementet som beskriver feltet.

Prop:

inline?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Angir om feltet skal flyte med teksten

Prop:

hasFieldset?

Type:

boolean

Beskrivelse:

Bruk fieldset og legend i stedet for label.

Prop:

counter?

Type:

boolean

Beskrivelse:

Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.

Events

Event:

change

Type:

Event

Beskrivelse:

Fyres når en dato velges. Verdien ligger på elementet som kommaseparerte ISO-datoer. I range-modus fyres den når perioden er komplett eller tømt, ikke når bare fra-datoen er fylt inn.

Event:

value-change

Type:

CustomEvent

Beskrivelse:

Returnerer verdien i event.detail: en ISO-dato som streng for én dato, en array med ISO-datoer ved flervalg og datotidsrom. Fyres ved hver verdiendring, også når bare fra-datoen er fylt inn.

Event:

focus

Type:

FocusEvent

Beskrivelse:

Fyres én gang når fokus går inn i datovelgeren: feltet, kalenderknappen eller kalenderen. Flytting mellom dem fyrer ingenting.

Event:

blur

Type:

FocusEvent

Beskrivelse:

Fyres én gang når fokus forlater datovelgeren, også fra kalenderen. relatedTarget er elementet som får fokus.

Event:

onChange

Type:

(e: ChangeEvent<HTMLInputElement>) => void

Beskrivelse:

Fyres når en dato velges. e.target.value inneholder kommaseparerte ISO-datoer. I range-modus fyres den når perioden er komplett eller tømt, ikke når bare fra-datoen er fylt inn.

Event:

onFocus

Type:

(e: FocusEvent<HTMLInputElement>) => void

Beskrivelse:

Kalles én gang når fokus går inn i datovelgeren: feltet, kalenderknappen eller kalenderen. Flytting mellom dem kaller den ikke.

Event:

onBlur

Type:

(e: FocusEvent<HTMLInputElement>) => void

Beskrivelse:

Kalles én gang når fokus forlater datovelgeren, også fra kalenderen. e.target er det skjulte feltet med name, som i onChange, så register() fra react-hook-form fungerer.

Event:

onValueChange

Type:

(values: string[]) => void

Beskrivelse:

Kalles med en string[] med valgte datoer i ISO-format, ved hver verdiendring, også når bare fra-datoen er fylt inn.