Duration Picker


Default Duration Picker (no duration and no durationType set)

Other examples

Return value

selectedDuration: Days: {{ selectedDuration?.days }} Hours: {{ selectedDuration?.hours }} Minutes: {{ selectedDuration?.minutes }} Seconds: {{ selectedDuration?.seconds }}

Disabled Duration Picker

Make sure you're using [disabled]="true" instead of 'disabled' directive (witch can cause some errors).

Required Duration Picker

Readonly Duration Picker



Developer information

To explore deeper into the implementation details of the component, we recommend exploring the dedicated documentation page for the component here.

It's crucial to note that the BciDurationPicker functions as a standalone component independent of any specific module. Therefore, you need to import it separately. For further insights into Angular standalone components, refer to the Angular documentation.

Duration data types ('duration' input property) Also available both as an output data type. Accepted duration types ('durationType' input property)
  • ddd.HH:MM:SS
  • ddd.HH:MM
  • HH:MM:SS
  • ddd.HH
  • MM:SS
  • HH:MM
  • ddd
  • HH
  • MM
  • SS
Helper functions
In order to help you to fit the input <-> output data as good as possible, we implemented some helper functions to prevent adding additional code into your projects.
Functions
Translations

You have to import and use the @Injectable class BciDurationPickerIntl.

Error handling