Components

TimePicker

Timepicker – eller tidsvelger – er en komponent som lar brukeren velge et tidspunkt på en brukervennlig måte.

Examples

En enkel tidsvelger

<TimePicker />

En tidsvelger der tiden blir styrt utenfra

() => {
  const [time, setTime] = React.useState(new Time(13, 37));
  return (
    <Stack>
      <TimePicker value={time} onChange={setTime} />
      <Text>Tiden er nå {time.toString()}</Text>
    </Stack>
  );
}

En tidsvelger der hvert trykk på knappene tar deg til nærmeste kvarter

<TimePicker minuteInterval={15} />

En tidsvelger inni et skjema

<form onSubmit={(e) => {
  e.preventDefault();
  alert(`The time is ${e.target.time.value}`);
}}>
    <TimePicker name="time" marginBottom={2} />
    <Button variant="primary" type="submit">Send inn</Button>
</form>

En tidsvelger med feilmelding

<FormControl isInvalid={true}>
  <TimePicker />
  <FormErrorMessage>Ugyldig avreisetidspunkt</FormErrorMessage>
</FormControl>

En disabled tidsvelger

<TimePicker isDisabled />

En tidsvelger med custom label, og fullbredde:

<TimePicker width="100%" label="Avreisetid" />