TimePicker

() => {
    const [time, setTime] = React.useState(now('Europe/Oslo'));
    return (
      <TimePicker
        label="Tid"
        selectedTime={time}
        onChange={time => setTime(time)}
      />
    );
  }

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

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

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.

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;

1const [time, setTime] = useState(new Date());
2  return (
3    <TimePicker
4      label="Choose time"
5      selectedTime={nativeDateToTimeValue(time)}
6      onChange={t => setTime(timeOrDateValueToNativeDate(t))}
7    />
8  );

1const [time, setTime] = useState(new Date());
2  return (
3    <TimePicker
4      label="Choose time"
5      selectedTime={
6        nativeDateToTimeValue(
7          time,
8          false,
9          'Europe/Oslo',
10        )
11      }
12      onChange={t => setTime(timeOrDateValueToNativeDate(t))}
13    />
14  );

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.

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

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.

feedback vises i en live region med role="status", slik at skjermlesere leser opp meldingen når den kommer. Ikonet ved siden av meldingen er skjult for skjermlesere, så teksten må være selvforklarende og tydelig formidle om det er en feilmelding eller et varsel. Du kan styre opplesingen med ariaAlertOnFeedback, der standardverdien 'status' gir en høflig opplesing, 'alert' avbryter skjermleseren umiddelbart og false skrur av opplesingen helt, og med feedbackProps kan du sette egne role- og aria-live-verdier.

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

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

Denne komponenten har ingen props

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

Denne komponenten har ingen props

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

Denne komponenten har ingen props