Gå til hovedinnhold
KOMPONENTER

Timepicker

npmv8.0.5

TimePicker er en komponent for å velge et tidspunkt.

Kontrast
() => {
const [time, setTime] = React.useState(now('Europe/Oslo'))
return (
<TimePicker
label="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.

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.

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 (
<TimePicker
label="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 (
<NativeTimePicker
label="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.

Komponenter

<TimePicker />

NavnTypeDefault-verdiBeskrivelse
selectedTimeTimeValue | null

Den valgte tiden. Tid i ‘@internationalized/date’-pakkens format

onChange(value: MappedTimeValue<TimeType> | null) => void

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

labelstring

Label til TimePicker

minuteIncrementForArrowButtons?number 30

Minutter som legges til eller trekkes fra ved klikk på pilene i TimePicker

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

leftArrowButtonAriaLabel?string `Trekk fra ${minuteIncrementForArrowButtons} minutter`

Aria-label for venstrepil-knappen som trekker fra tid

rightArrowButtonAriaLabel?string `Legg til ${minuteIncrementForArrowButtons} minutter`

Aria-label for høyrepil-knappen som legger til tid

feedback?string

Varselmelding, som vil komme under TimePicker

variant?VariantType

Valideringsvariant

labelTooltip?ReactNode
disabled?boolean
inputRef?ForwardedRef<HTMLDivElement>
className?string

Ekstra klassenavn

style?CSSProperties

<NativeTimePicker />

NavnTypeBeskrivelse
className?string

Ekstra klassenavn

labelstring

Label over NativeTimePicker

feedback?string

Varselmelding, som vil komme under NativeTimePicker

variant?VariantType

Valideringsvariant

prepend?ReactNode

Tekst eller ikon som kommer før inputfelter

Rediger denne siden på Bitbucket