Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Form element for selecting a time.


import { Timepicker } from '@folio/stripes/components';

// later in your JSX....
<Timepicker />


Name type description default required
id string Sets the id html attribute on the control
label string If provided, will render a <label> tag with an htmlFor attribute directed at the provided id prop.
value string Sets the value for the control. Not necessary if using redux-form.
onChange function Callback function that will receive the control's current value and the onChange event object. fn(e, value) Not necessary if using redux-form, but it will still work if callback from a change is needed.
passThroughValue (deprecated) string Can be used to set dynamic values up to the form - values should be inspected/adjusted in a handler at submission time (like a button click that calls submit().) See below for usage example.
autoFocus bool If this prop is true, control will automatically focus on mount
timeZone string Overrides the time zone provided by context. "UTC" false
locale string Overrides the locale provided by context. "en" false

Working with Times

Using a value that does not include any timezone information, the time is assumed by moment() to be in the local timezone. When the local timezone is east of UTC, such as +03:00, and converted to UTC for internationalization formatting, the offset will be subtracted from the time. For example, a value of 12:00 will appear as 9:00 UTC when viewed in the EEST timezone.

When comparing or manipulating dates, it is safest to operate in UTC mode and leave display formatting to internationalization helpers. If using moment, this can be done via moment.utc().

Usage in Redux-form

Redux form will provide input and meta props to the component when it is used with a redux-form <Field> component. The component's value and validation are supplied through these.

<Field name="exampleTimeReturned" label="Time returned" id="timeReturnTP" placeholder="Select Time" component={Timepicker} />
You can’t perform that action at this time.