Tiny JavaScript Library For Selecting Duration – DurationPickerMaker

Category: Date & Time , Javascript | May 14, 2020
Views Total:1,022 views
Official Page:Go to website
Last Update:May 14, 2020
License:BSD 3-Clause


Tiny JavaScript Library For Selecting Duration – DurationPickerMaker


A user-friendly duration (total seconds) picker written in vanilla JavaScript.

To select a duration, click the hours/minutes/seconds slots and type any digits inside the time field, or use up/down arrows to increment/decrement the time values.

How to use it:

1. Create a normal text field for the duration picker.

<input id="duration_picker_field" />

2. Create an element where you want to output the selected duration.

<label id="output_label"></label>

3. Load the DurationPickerMaker and FormattedDuration JavaScript files at the end of the document.

<script src="./src/DurationPickerMaker.js"></script>
<script src="./src/FormattedDuration.js"></script>

4. The JavaScript to enable the duration picker.

let pickerElement = document.getElementById("duration_picker_field");
let receiverLabel = document.getElementById("output_label");
class LabelWrapperReceiver {
      constructor(labelElement) {
        this.labelElement = labelElement;
      setSecondsValue(value) {
        this.labelElement.textContent = value;
let labelWrapperReceier = new LabelWrapperReceiver(receiverLabel);
let formattedDuration = new FormattedDuration(config = {
    // options here
let durationPickerMaker = new DurationPickerMaker(formattedDuration);
durationPickerMaker.SetPickerElement(pickerElement, window, document);

5. Customize the label text displayed in the hours/minutes/seconds slots.

let formattedDuration = new FormattedDuration(config = {
    hoursUnitString: " h ",
    minutesUnitString: " m ",
    secondsUnitString: " s "

You Might Be Interested In:

Leave a Reply