Datepicker
DatePicker, DateField, Calendar og NativeDatePicker er komponenter for å velge datoer.
() => {const [date, setDate] = React.useState(now('Europe/Oslo'))return (<DatePickerlabel="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.
@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 (<DatePickerlabel="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 (<DatePickerlabel="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 (<DatePickerlabel="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 (<NativeDatePickerlabel="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.