Timepicker

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.

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 />

import { TimePicker } from '@entur/datepicker';

<NativeTimePicker />

import { NativeTimePicker } from '@entur/datepicker';