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)}
      />
    );
  }

Kom i gang

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 | 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"
      />
    );
  }

Retningslinjer

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.

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' }}
        />
      </>
    );
  }

Props

TimePicker

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

Denne komponenten har ingen props

SimpleTimePicker

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

Denne komponenten har ingen props

NativeTimePicker

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

Denne komponenten har ingen props