Tiny JavaScript Library For Selecting Duration – DurationPickerMaker

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

Preview:

Tiny JavaScript Library For Selecting Duration – DurationPickerMaker

Description:

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.AddSecondChangeObserver(labelWrapperReceier);
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