Gå til hovedinnhold
KOMPONENTER

Datepicker

npmv2.1.1

DatePicker og NativeDatePicker er komponenter for å velge datoer.

Komponenter

DatePicker

NavnTypePåkrevd?Default-verdiBeskrivelse
selectedDateDate | null

Hva som er den valgte datoen

onChange((date: Date | null, event: SyntheticEvent<any, Event> ) => void) & ((date: Date | null, event: SyntheticEvent<any, Event> ) => void)

Kalles når datoen/tiden endres

onKeyDown(((event: KeyboardEvent) => void) & ((event: KeyboardEvent<HTMLDivElement>) => void)) () => null

Kalles når en tast trykkes i inputfeltet

dateFormatsstring[] ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy']

Datoformater som skal støttes. Første i listen er formatet alt input omgjøres til. Format-valg tilgjengelig her: https://date-fns.org/v2.28.0/docs/format OBS: Noen kombinasjoner av datoformater kan gi rar og uønsket oppførsel, test nøye ved endring

localeLocale nb

Locale fra date-fns som brukes av Datepicker-en

placeholderstring dd.mm.yyyy

Placeholder om ingen dato er valgt

classNamestring

Ekstra klassenavn

labelstring

Label over DatePicker

feedbackstring

Varselmelding, som vil komme under DatePicker

variantVariantType

Valideringsvariant

validationFeedbackstring Ugyldig dato

Varselmelding for når datoen er på feil format

validationVariantVariantType error

Valideringsvariant for melding om feil datoformat

styleCSSProperties
disableLabelAnimationboolean false

Plasserer labelen statisk på toppen av inputfeltet

prependReactNode<DateIcon />

Tekst eller ikon som kommer før inputfelter

calendarButtonTooltipOpenstring Åpne kalender

Tekst som vises når kalender ikke er åpen på «Åpne/Lukk kalender»-knappen ved hover

calendarButtonTooltipClosestring Lukk kalender

Tekst som vises når kalender er åpen på «Åpne/Lukk kalender»-knappen ved hover

hideCalendarButtonboolean false

Skjuler knapp for åpning av kalender

hideValidationboolean false

Skjuler tilbakemeldingsteksten ved feil dato-input

hideCalendarboolean false

Skjuler kalender-GUI-et

inlineboolean false

Viser kun kalender-popover-en

previousMonthAriaLabelstring Forrige måned

Skjermlesertekst for forrige måned-knapen

nextMonthAriaLabelstring Neste måned

Skjermlesertekst for neste måned-knapen

chooseDayAriaLabelPrefixstring Velg

Skjermlesertekst som leses før dato i kalenderGUI-et

data-cyany

Komponenten vår er bygget på react-datepicker, og støtter dermed en rekke props, selv om 100% kompabilitet ikke kan garanteres. Les mer om disse her.

Den støtter også date-fns og det anbefales at datofunksjonene fra date-fns brukes. Eksempelvis addWeeks for å sette en maksgrense på én uker man kan velge datoer fra.

Komponenten kan også brukes som kun kalender uten input eller motsatt. For kun kalender benytter man inline-propen og for kun input uten kalender bruker man hideCalendar-propen.

For deg som ønsker å støtte mobil, så eksisterer det også en NativeDatePicker. Den wrapper en input hvor type="date", som i noen sammenhenger kan være og foretrekke.

Rediger denne siden på Bitbucket