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.