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 |
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().
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} />