A react-bootstrap Popover that let's you set a runtime like i fyou were entering time in a microwave.
These are the things your project needs for runtime-picker to work.
- react
- react-dom
- react-bootstrap
yarn add runtime-picker
You can then import it into your webpack components as follows:
import RuntimePicker from 'runtime-picker';Runtime-Picker generates a hidden text field containing the runtime picked calculated in seconds,
so you can submit this as part as our form, however you can send your custom onChange handler and
receive the number of seconds when the component updates.
| Property | Type | Default | Description |
|---|---|---|---|
disabled |
boolean | false |
Whether the runtime picker should be disabled, this renders a hidden input as well and visible text field with the parsed runtime |
maxHours |
number | 9999 |
This is the max number of hours you can enter in your runtime |
name |
string | 'runtime' |
The name of the hidden text field containing the runtime in seconds |
onChange |
Function | undefined |
Event handler to be called after the component updates |
placeholder |
string | 'HHHH:MMM:SS' |
Visible text field placeholder text |
placement |
string | 'bottom' | 'left' | 'right' | 'top' |
This is the Popover position relative to the visible text field |
skipSeconds |
boolean | false |
Whether we wish to start from minutes instead of seconds and lose some granularity |
title |
string | 'Pick your Runtime' |
This is the Popover's title |
value |
number | 0 |
This is the startoff value in seconds |
If you're rendering inside a <Modal /> make sure to set your modal's enforceFocus prop to false.