TimeSelect

How to get TimeSelect

import { TimeSelect } from 'fds/components';

Type: Component

Three SingleAutocomplete components, used for selecting and hour, minute and second value. This component doesn't support selecting a date value (year, month and day), if this is desired consider using a CalendarInput or DateTimeSelect instead.

Props

# Name Type Description
1. [hoursPlaceholder] String

The placeholder text displayed in component when it is empty, i.e. has no values.

  Default value
"(Hours)"
2. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
3. [minutesPlaceholder] String

The placeholder text displayed in component when it is empty, i.e. has no values.

  Default value
"(Minutes)"
4. [name] String

The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.

  Default value
null
5. [onChange] Function

A callback that is called whenever a component's value changes.

This callback is called just before the "validate" prop is called.

Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.


  Arguments
# Name Type Description
1. value Value | Array<ItemWithLabelAndValueValue>

A single value or an array of values, depending on the component that is changing.


  Value

Type: *

The current value of the component. This value will be visualized in the component, often using a human readable label, sometimes using another visual indication (e.g. Checkbox).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

  ItemWithLabelAndValueValue

Type: *

The value of an ItemWithLabelAndValue.

This value is used to compare items, eg. when determining the selected item(s).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

6. [secondsPlaceholder] String

The placeholder text displayed in component when it is empty, i.e. has no values.

  Default value
"(Seconds)"
7. [tooltipContent] String | ReactElement

The content of the tooltip that is displayed when hovering over the whole component.

  • string: the textual content of the tooltip

  • ReactElement: a React Element (instance of a React Component, usually created with JSX)

  Default value
null
8. [value] Object

The current value of the component. This value should be a valid JavaScript date.

  Default value
null
9. isBorderless
  Default value
false
10. onPositionerMount
11. onPositionerUnmount
Was this page helpful?