TimePicker

• brukeren skal velge et tidspunkt

For grensesnitt der et kompakt skjemafelt og mulighet til å kopiere og lime inn fullstendige tidspunkt er viktig, kan du bruke SimpleTimePicker. Denne varianten har mindre funksjonalitet enn TimePicker — den har f.eks. ikke locale og fullstendig UU-støtte — men bygger på samme tidsobjekt. Brukeren skriver inn tidspunktet i et av følgende formater (t: time, m: minutt, s: sekund): tmm, ttmm, tt:mm, tmmss, ttmmss, t:mm:ss, tt:mm:ss.

TimePicker fungerer like bra på mobile enheter, men ønsker du en OS-spesifikk opplevelse kan NativeTimePicker brukes i stedet.

Du kan velge dato sammen med tidspunktet på to måter: ved å bruke en DatePicker i kombinasjon med TimePicker, eller inline ved å bruke en DatePicker med prop-en showTime. Se DatePicker-siden for eksempler.

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

() => {
  const [nativeTime, setNativeTime] = React.useState(new Date());
  return (
    <NativeTimePicker
      label="Tid"
      style={{ width: '15rem' }}
      value="10:30:00"
    />
  );
}