Gå til hovedinnhold
KOMPONENTER

Datepicker

npmv8.0.5

DatePicker, DateField, Calendar og NativeDatePicker er komponenter for å velge datoer.

Kontrast
() => {
const [date, setDate] = React.useState(now('Europe/Oslo'))
return (
<DatePicker
label="Dato"
selectedDate={date}
onChange={date => setDate(date)}
locale="no-NO"
/>
)
}

Bruk

DatePicker hjelper brukeren å velge en dato – og evt. et tidspunkt. Den bruker pakken @internationalized/date i bakgrunnen til håndtering av dato-objektet, inkludert tidssoner – dette er tilsvarende i TimePicker. DatePicker støtter også ulike locals og språk. DatePicker bygger på react-aria og støtter det meste av funksjonalitet du finner der, les mer her.

OBS: hjelpefunksjoner fra @internationalized/date (typ. now() og isWeekend()) er ikke inkludert i @entur/datepicker, legg til @internationalized/date i repo ditt for å bruke dem.

Språk og locale

Språk og locals er støttet gjennom to metoder. All automatisk tilpassing av språk skjer gjennom prop-en locale eller react-aria sin <I18nProvider />. locale støtter strenger på BCP 47-formatet, eks. no-NO for norsk. Her finner du en liste over BCP 47-koder. Som default velges den locale-en som er satt på brukeren maskin.

Ledeteksten (label), og navigationDescription* må sende inn manuell oversettelse for. For navigationDescription vil en norsk og engelsk verdi følge med automatisk, men andre språk må legges inn selv.

*navigationDescription er en prop som forteller brukeren hvordan de kan navigere i kalenderen med tastaturet.

DatePicker tilpasset USA

() => {
const [date, setDate] = React.useState(now('Europe/Oslo'))
return (
<DatePicker
label="Date"
selectedDate={date}
onChange={date => setDate(date)}
locale="en-US"
/>
)
}

Tidssoner

TimePicker støtter tidssonehåndtering for å sikre lik opplevelse på tvers av tidssoner. Dette håndteres ved @internationalized/date sitt ZonedDateTime-objekt. Under er et eksempel på hvordan du lager state for nåværende dato og tidspunkt i norsk tidssone, og for et spesifikt tidspunkt i Los Angeles sin tidssone:

// nåværende tidspunkt i norsk tidssone
const [date, setDate] = React.useState(now('Europe/Oslo'));
// spesifikt tidspunkt i Los Angeles sin tidssone
const [date2, setDate2] = React.useState(parseZonedDateTime('2022-11-07T00:45[America/Los_Angeles]'));

Les mer om hvordan opprette og bruke tidssonefunksjonalitet her.

Datovalidering

Hvis du ønsker å begrense tilgjengelige datoer for brukeren, samt gi en tilbakemelding når en dato utenfor dette intervallet er valgt, kan du benytte minDate- og maxDate-props-ene eller isDateUnavailable()-valideringsfunksjonen. minDate og maxDate tar inn et CalendarDate-objekt. isDateUnavailable() skal ta inn en DateValue og returnerer en boolean for om datoen er gyldig.

Validering med minDate og maxDate

Følgende eksempel godtar datoer fra og med i dag til og med en måned frem:

() => {
const [date, setDate] = React.useState(
today('Europe/Oslo').add({ months: 2 }),
)
return (
<DatePicker
label="Velg dato"
selectedDate={date}
onChange={setDate}
locale="no-NO"
minDate={today('Europe/Oslo')}
maxDate={today('Europe/Oslo').add({ months: 1 })}
validationFeedback="Valgt dato er for langt frem i tid"
/>
)
}

Validering med isDateUnavailable

Følgende eksempel godtar datoer som ikke er en helg.

() => {
const [date, setDate] = React.useState(now('Europe/Oslo'))
return (
<DatePicker
label="Velg dato"
selectedDate={date}
onChange={setDate}
locale="no-NO"
isDateUnavailable={date => isWeekend(date, 'no-NO')}
validationFeedback="Valgt dato kan ikke være en helgedag"
/>
)
}

Bruke JS Date i stedet for @internationalized/date

Hvis du ikke har mulighet til å bruke @internationalized/date, kan du bruke konverteringsfunksjonene: nativeDateToDateValue og timeValueToNativeDate. Disse konverterer mellom @internationalized/date sine tre dato-typer: ZonedDateTime, CalendarDateTime og CalendarDate (DateValue er en samling av disse tre typene) og Javascript sin Date. Se API under, nærmere beskrivelse finnes i JSDocs for funksjonene:

nativeDateToDateValue: (date: Date, noTimeOnlyDate?: boolean, timeZone?: string | undefined, offset?: number | undefined) => CalendarDateTime | ZonedDateTime | CalendarDate;
timeOrDateValueToNativeDate: (time: TimeValue, timeZoneForCalendarDateTime?: string | undefined) => Date;

Eksempel på bruk av JS-date med DatePicker

Bruk på mobile enheter

DatePicker fungerer også på mobile enheter. For å gjøre valg enklere for brukere med berøringskjermer benyttes en modal i stedet for en popover når skjermen er smalere enn 1000px. På denne måten vil alltid hele datovelgeren vises når man åpner den. Dette er mulig å skru av ved å bruke prop-en disableModal.

Ønsker man en OS-spesifikk opplevelse av DatePicker-en, kan man benytte seg av NativeDatePicker. Denne har noe styling for å gi den et Entur-preg, men vil bruke OS-et sin styling og interaksjonsmetode når man interagerer med den.

() => {
return (
<NativeDatePicker
label="Fødselsdato"
style={{ width: '15rem' }}
value="1997-07-10"
/>
)
}

Kun kalender

Hvis du ønsker å kun vise en inline kalender til brukeren kan du benytte <Calendar />-komponenten. Denne fungerer med samme type datoobjekter som <DatePicker /> og støtter mange av de samme props-ene.

Kun inputfelt

Hvis du ønsker å kun vise et inputfelt uten mulighet for en kalender-popover kan du benytte <DateField />-komponenten. Denne fungerer med samme type datoobjekter som <DatePicker /> og støtter mange av de samme props-ene.

Universell utforming

DatePicker bruker react-aria i bakgrunnen.Denne pakken sørger for gjennomgående støtte for universell utforming. Hvert datosegment er tilgjengelig med tastaturet og alle interagerbare elementer, både i inputfeltet og i kalenderen, har aria-beskrivelser.

Hvordan oppfylle UU-krav

Hvis du endrer locale (dvs. språk) til noe annet enn norsk og engelsk må du sende inn verdier på riktig språk til navigationDescription-prop-en.

Komponenter

<DatePicker />

NavnTypeDefault-verdiBeskrivelse
selectedDateDateValue | null

Den valgte datoen. Dato i ‘@internationalized/date’-pakkens format

onChange(value: MappedDateValue<DateType> | null) => void

Kalles når tiden endres. Dato i ‘@internationalized/date’-pakkens format

labelstring

Ledetekst for inputfeltet til DatePicker

locale?string Brukerenhetens selvvalgte locale

BCP47-språkkoden til locale-en du ønsker å bruke.

showTimeZone?boolean false

Viser den gjeldende tidssonen hvis en er valgt (krever at tid også vises)

showTime?boolean

Viser tidspunkt i tillegg til dato. OBS: selectedDate må være av typen CalendarDateTime eller ZonedDateTime

minDate?DateValue

Tidligste gyldige datovalg. Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.

maxDate?DateValue

Seneste gyldige datovalg. Eks: today(getLocalTimeZone()) == i dag i lokal tidssone

OBS: Hvis du bruker dato med tid vil det være til, men ikke med denne datoen

isDateUnavailable?(((date: DateValue) => boolean) & ((date: DateValue) => boolean))

Funksjon som tar inn en dato og sier om den er utilgjengelig. Eks. (date) => isWeekend(date, ‘no-NO’) == helgedager er ikke tilgjengelig Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.

feedback?string

Varselmelding, som vil komme under DatePicker sitt inputfelt

variant?VariantType

Valideringsvariant

validationFeedback?string "Ugyldig dato"

Varselmelding som forteller om ugyldig dato

validationVariant?VariantType "error"

Valideringsvariant for melding om ugyldig dato

disabled?boolean
disableModal?boolean false

Hvis true vil kalenderen alltid vises i en popover når den åpnes

modalTreshold?number 1000

Maxbredden til viewport-en for at modal skal vises

labelTooltip?ReactNode
navigationDescription?string 'Bruk piltastene til å navigere mellom datoer'

Skjermlesertest som forklarer navigasjon i kalenderen. Oversettes automatisk for engelsk locale, men ikke andre språk.

className?string

Ekstra klassenavn

style?CSSProperties

<DateField />

Denne komponenten har ingen props

<Calendar />

Denne komponenten har ingen props

<NativeDatePicker />

NavnTypeDefault-verdiBeskrivelse
className?string

Ekstra klassenavn

labelstring

Label over NativeDatePicker

feedback?string

Varselmelding, som vil komme under NativeDatePicker

variant?VariantType

Valideringsvariant

disableLabelAnimation?boolean false

Plasserer labelen statisk på toppen av inputfeltet

prepend?ReactNode<DateIcon />

Tekst eller ikon som kommer før inputfelter

Rediger denne siden på Bitbucket