Timepicker

Overview

Timepickers allow users to choose a time value from the provided options. They can be used for a wide range of scenarios like specifiying promotion start/end time, store location working hours and so on.

When to use:

  • When there is a need to pick a time from predefined time options.

Implementation

Edit the code below to see your changes live!

function Example() {
  const [time, setTime] = useState<string>();

  return (
    <Form>
      <FormGroup>
        <Timepicker
          locale="en-US"
          onTimeChange={(value) => setTime(value)}
          value={time}
        />
      </FormGroup>
    </Form>
  );
}

Props

Prop name
Type
Default
Description
onTimeChange *(value: string) => void

Callback called with value of selected time.

labelstring | FormControlLabel

Adds a label to the field.

localestringen-US

Locale used to format the the date and calendar. See DateTimeFormat

valuestring

The time that should be used as the input value.

localization{ optional: string }

Overrides the label with localized text.

Props ending with * are required

Do's and Don'ts

Do
Put the field next to the Timepicker field with unified label when there is a need to pick date and time (see examples).
Use local time formats.