duration-picker
The duration-picker in a form allows you to specify a time duration easily. It's particularly useful for tasks that require tracking time intervals, like logging work shifts, break times, time spent on a particular task, or time-based billing. For example, if an app user needs to record the time spent performing a certain activity, a duration-picker lets them choose the time. This can simplify input by providing a user-friendly interface where they can scroll or tap to select hours or minutes rather than manually typing in numbers.
It helps to ensure data consistency and ease of use, especially for workers in fields like logistics, maintenance, or service roles who may need to record durations quickly and accurately while on the go.
Core structure | |
|---|---|
instanceId | The unique identifier for the duration-picker, and can be used in inputs in other properties or s, or to set a component's state. |
label | Provide a label/name for the duration-picker. 'Label' is displayed as a placeholder when no value is specified. Localization is supported. |
Other options | |
|---|---|
color | Sets the color of the duration-picker based on conditions by using the when property. First evaluated to true will be used. Choose a color from the provided color palette. Default color is grey if the property is not specified in the YAML. See the list of available colors in Jigx color palette. |
errorText | Add text, string, or expressions to show text under the duration-picker indicating an error/invalid value in the field. Text is shown in isNegative (red) styling. Localization is supported. |
helperText | Add text, string, or expressions to guide users by showing text under the duration-picker. Helper text is displayed only when there is no errorText. Localization is supported. |
hours | Specify whether the duration-picker will use hours or not.
|
initialValue | The initialValue is the duration that will be displayed in the duration-picker when the form is initially loaded. Specified in seconds, for example, 1800 for 30 mins. You can use this property to preset the duration-picker with a default value so that you do not have to manually select it. For example, if most field-service appointments are 30 mins then preset the duration-picker initialValue property with 1800. |
isHidden | If true the duration-picker will be hidden on the form. If set to false the field will be shown. |
isIgnored | When true, the field will be ignored when submitting the form and the content will not be stored. |
isOptionalLabelHidden | If the field is optional you can turn off the "(optional)" label by setting this field to true. This property works in combination with isRequired: false. |
isRequired | Set to true when the duration-picker is required. Useful when you use it in form submission. Set to false the duration-picker is optional and will have (optional) in the label. |
minutes | Specify whether the duration-picker will use minutes or not.
|
nextProperty | Name of the property you want to focus next in the form when you use return/next on a keyboard. |
style | The following property settings are available:
More than one can be true. It will be evaluated based on priority. |
value | The value that the duration-picker will output as its state. Specified in seconds, for example, 1800 for 30 mins. |
Actions | |
|---|---|
onChange | The action is triggered when the time in the duration-picker is changed. Use IntelliSense (ctrl+space) to see the list of available actions. |
State Configuration | Key | Notes |
|---|---|---|
value |
| |
activeItemId now |
|
- The duration-picker component can only be used in a form component on a default .
- The duration-picker is an input control.
- Maximum duration allowed is 23h 59 mins.
- In properties that allow you to specify the duration, for example, initialValue and value, the duration is specified in seconds, for example, 1800 for 30 mins.
In this example, a customer manager records their interaction with a customer in the form. The duration-picker component is used to record the time spent with the customer. The component is configured in its simplest form, with only the label property defined.
Examples: See the full example in GitHub.
In this example, you can complete a form to make an appointment. In the form you can select the appointment duration. The duration-picker is configured to only allow you to select hours in intervals (steps) of 2 hours. Minutes have been disabled.
Examples: See the full example in GitHub.
In this example, a security patrol officer records the security check-ins for different patrol areas. In the form the duration of the patrol is recorded. The duration-picker is configured to only allow the selection of minutes in intervals (steps) of 10 minutes. Hours have been disabled.
Examples: See the full example in GitHub.
In this example, when the repair time is selected in the duration-picker the screen opens the list of repairs configured in the onChange property.
Examples: See the full example in GitHub.
In this example, employees select the shifts they want to work. A normal shift is 4 hours. The initialValue is used in the duration-picker to pre-populate the field with 4h. If more than 4 hours is selected the field displays in red with a message that approval for the extra time is needed. The duration-picker is configured with hours in intervals (steps) of 4, and minutes in intervals (steps) of 30 minutes. Both helperText and errorText are used to guide the employee with extra information depending on the selections made.
Examples: See the full example in GitHub.
In this example, the duration-picker is added to a site inspection form, and configure with minutes allowing a selection in 30 minute intervals, and hours in 2 hour intervals. The color yellow (warning) is defined to let the inspector know that average inspection time is 2 hours, which is also pre-populate in the field with 2h using the initialValue property. HelperText provides additional information to the inspector indicating what is expected in the duration-picker.
Examples: See the full example in GitHub.
