Skip to content
Home

Field.Time

Info
Demos
Properties
Events

Events

Field-specific events

TypeDescription
onChange(value?: string, additionalArgs?: { hours?: string, minutes?: string, seconds?: string }) => void(optional) Callback on hours, minutes, and seconds change.

General events

TypeDescription
onFocus(value?: string, additionalArgs: object) => void(optional) Will be called when the component gets into focus. Like clicking inside a text input or opening a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains properties (all given Field.* properties).
onBlur(value?: string, additionalArgs: object) => void(optional) Will be called when the component stops being in focus. Like when going to next field, or closing a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains properties (all given Field.* properties).
onStatusChange({ info?, warning?, error? }: FieldStatus) => void(optional) Called whenever the status messages (info, warning or error) gets visible or changes. Receives the current { info, warning, error } object.

Details about general events arguments

The first argument value returned by the event handlers is a string where the hours and minutes are separated by a :, e.g. 14:30.

The Time field also has an extra second parameter that includes additional information about the hours, minutes, and seconds. This is an object with the following properties:

render(
  <Field.Time
    onChange={(
      value: string | undefined, // e.g. "14:30"
      additionalArgs?: {
        hours: string | undefined // e.g. "14"
        minutes: string | undefined // e.g. "30"
        seconds: string | undefined // e.g. "45" (only when showSeconds is true)
      }
    ) => {}}
  />
)