Duration Input
The duration input lets users input an amount of time duration, not a specific time.
import { DurationInput, durationStringToMinutes, minutesToDurationString } from '@balance-web/duration-input';It shares disabled, read only and validation states with TextInput.
Usage
The value and onChange props expect an integer of minutes e.g. 1.5 hours
would be 90 minutes. This is to circumvent JS issues with float calculations.
display prop allows user to select the duration format.
Duration input can handle vast number of duration input formats and converts them to desired format on blur,
| User input | Formatted to (when "display: time") | Formatted to (when "display: duration") |
|---|---|---|
| 0 | 0:00 | 0h 0m |
| 5 | 5:00 | 5h 0m |
| 5.5 | 5:30 | 5h 30m |
| 30m | 0:30 | 0h 30m |
| 5h 30m | 5:30 | 5h 30m |
| 5:30 | 5:30 | 5h 30m |
| 5h30m | 5:30 | 5h 30m |
| 30m 5h | 5:30 | 5h 30m |
Basic
Basic with the default display prop (e.g. time)
Basic with the display prop as duration
Converting values outside the input
The parsing and formatting behind the table above are exported directly, for when you need to show or convert a duration without rendering the input itself (e.g. a read-only summary, or converting a value before saving it).