Timepicker
TimePicker er en komponent for å velge et tidspunkt.
() => {const [time, setTime] = React.useState(now('Europe/Oslo'))return (<TimePickerlabel="Tid"selectedTime={time}onChange={time => setTime(time)}/>)}
Bruk
TimePicker hjelper brukeren med å velge et tidspunkt. Den bruker pakken @internationalized/date til håndtering av dato og tid, inkludert tidssoner.
TimePicker-en har også støtte for ulike locals og språk. react-aria
brukes i bakgrunnen, 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.
I tillegg er det noen ledetekster og aria-label
-er som må sendes inn manuelt. Dette gjelder leftArrowButtonAriaLabel
og rightArrowButtonAriaLabel
.
TimePicker tilpasset USA
() => {const [time, setTime] = React.useState(now('Europe/Oslo'))return (<TimePickerlabel="Time"selectedTime={time}onChange={time => setTime(time)}locale="en-US"leftArrowButtonAriaLabel="Subtract 30 minutes"rightArrowButtonAriaLabel="Add 30 minutes"/>)}
Tidssoner
TimePicker støtter tidssonehåndtering for å sikre lik opplevelse på tvers av tidssoner. Dette håndteres ved @internationalized/date
sitt ZonedDateTime
-objekt, les mer om hvordan opprette og bruke tidssonefunksjonalitet her.
Bruke JS Date i stedet for @internationalized/date
Hvis du ikke har mulighet til å bruke @internationalized/date
, kan du bruke konverteringsfunksjonene: nativeDateToTimeValue
og timeValueToNativeDate
. Disse konverterer
mellom @internationalized/date
sine tre tidstyper: ZonedDateTime
, CalendarDateTime
og Time
(TimeValue
er en samling av disse tre typene) og Javascript sin Date
.
Se API under, nærmere beskrivelse finnes i JSDocs for funksjonene:
nativeDateToTimeValue: (date: Date, noDateOnlyTime?: boolean, timeZone?: string | undefined, offset?: number | undefined) => Time | CalendarDateTime | ZonedDateTime;
timeOrDateValueToNativeDate: (time: TimeValue, timeZoneForCalendarDateTime?: string | undefined) => Date;
Eksempel på bruk av JS-date med DatePicker
Bruk på mobile enheter
TimePicker er fungerer like bra på mobile enheter også, men ønsker man en OS-spesifikk opplevelse på mobilen kan <NativeTimePicker />
benyttes. Her må dubenytte Date
-objektet til Javascript eller konvertere et TimeValue-objekt.
() => {const [nativeTime, setNativeTime] = React.useState(new Date())return (<NativeTimePickerlabel="Tid"style={{ width: '15rem' }}value="10:30:00"/>)}
Universell utforming
TimePicker bruker react-aria i bakgrunnen somsørger for gjennomgående støtte for universell utforming. Hvert tidssegment er tilgjengelig med tastaturet og alle interagerbare elementer har aria-beskrivelser.
Hvordan oppfylle UU-krav
Hvis du endrer locale
(dvs. språk) må du sende inn verdier på riktig språk til leftArrowButtonAriaLabel
- og rightArrowButtonAriaLabel
-props-ene.