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.

    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.