Gå til hovedinnhold
KOMPONENTER

Timepicker

npmv9.3.0

TimePicker er en komponent for å velge et tidspunkt.

npm install @entur/datepicker
@import '@entur/datepicker/dist/styles.css';
() => {
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 | null, noDateOnlyTime?: boolean, timeZone?: string | undefined, offset?: number | undefined) => Time | CalendarDateTime | ZonedDateTime | null;
timeOrDateValueToNativeDate: (value: TimeValue | DateValue | null, timeZoneForCalendarDateTime?: string | undefined) => Date | null;

Eksempel på bruk av JS-date med DatePicker

Bruk sammen med DatePicker

Du kan velge en dato sammen med tidspunktet på to ulike måter, enten ved å bruke en DatePicker i kombinasjon med TimePicker-en – se kombo av Time- og DatePicker-eksempel på siden til DatePicker –, eller inline ved å bruke en DatePicker med prop-en showTime – se inline-eksempel på siden til 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.

Mer kompakt fritektsvariant (B2B)

For grensesnitt der et kompakt skjemafelt og mulighet til å kopiere og lime inn fullstendige tidspunkt er viktig kan man bruke SimpleTimePicker. Denne varianten inneholder mindre funksjonalitet enn TimePicker – den har f.eks ikke locale og fullstendig UU-støtte –, men bygger på samme tidsobjekt. Man interagerer med feltet ved å skrive inn tidspunkt på et av følgende format (t: time, m: minutt, s:sekund): tmm, ttmm, tt:mm, tmmss, ttmmss, t:mm:ss, tt:mm:ss. Hvis du ønsker å vise sekunder i feltet kan du bruke showSeconds-prop-en.

() => {
const [time, setTime] = React.useState(now('Europe/Oslo'))
return (
<>
<SimpleTimePicker
label="B2B time"
selectedTime={time}
onChange={time => setTime(time)}
style={{ width: '7rem' }}
/>
<br />
<SimpleTimePicker
label="B2B time"
selectedTime={time}
onChange={time => setTime(time)}
showSeconds
style={{ width: '8.5rem' }}
/>
</>
)
}

Komponenter

<TimePicker />

import { TimePicker } from '@entur/datepicker';
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. Rundes av til nærmeste hele ‘minuteIncrement’ som går opp i 60.

OBS: Støtter kun verdier <= 60 og multiplum av 60.

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

showSeconds?boolean false

Viser sekunder i tillegg til minutter og timer

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>
forcedReturnType?"CalendarDateTime" | "ZonedDateTime" | "Time" undefined

Tvinger typen på onChange til den gitte typen. Dette er nyttig når utgangsverdien din er ‘null’, men du ønsker at TimePicker alltid skal returnere f.eks Time.

Som standard returnerer onChange TimeValue basert på selectedTime, eller ZonedDateTime hvis selectedTime er ‘null’.

forcedTimeZone?string
className?string

Ekstra klassenavn

style?CSSProperties

<SimpleTimePicker />

import { SimpleTimePicker } from '@entur/datepicker';
NavnTypeDefault-verdiBeskrivelse
selectedTimeTimeValue | null

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

onChange?((value: MappedTimeValue<TimeType> | null) => void | Dispatch<SetStateAction<TimeValue | null>>)

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

labelstring

Label til TimePicker

showSeconds?boolean false

Viser sekund i tillegg til time og minutt

showClockIcon?boolean | "right" | "left" false

Viser et klokkeikonet for å klarere indikere at dette er en tidsvelger

padding?"large" | "default" 'default'

Velger hvor mye luft det skal være på sidene av klokkeslettet

feedback?string

Varselmelding, som vil komme under TimePicker

variant?VariantType

Valideringsvariant

prepend?ReactNode

Tekst eller ikon som vises foran skjema-elementet

append?ReactNode

Tekst eller ikon som vises etter skjema-elementet

labelTooltip?ReactNode
disabled?boolean
readOnly?boolean
inputRef?ForwardedRef<HTMLInputElement>
className?string

Ekstra klassenavn

style?CSSProperties

<NativeTimePicker />

import { NativeTimePicker } from '@entur/datepicker';
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