https://goblin.tools/ext/duration.js?v=mKit9b9PNmarWuwUwEBfIdG4FVvFCRvHv5TZSbFVqkM

1(function( $ ) {
2    $.fn.durationjs = function( settings={} ) {
3        var $this = $(this);
4        $this.children('.duration-box').remove();
5        values = {}
6        var $lastInput;
7        var settings = $.extend({
8            display: 'dhm', // days hours & minues by default; must be sequential (i.e., no 'dms')
9            sInc: 1,
10            mInc: 15,
11            hInc: 1,
12            dInc: 1,
13            initVal: 0, // SECONDS -- EVERYTHING IS SECONDS! (for now, I guess)
14        }, settings );
15        
16        var tUnits = {
17            s: { dsp: "Sec", inc: settings.sInc, val: 0, max: 60, rate: 1 }, // default save value in seconds, 1 = 1
18            m: { dsp: "Min", inc: settings.mInc, val: 0, max: 60, rate: 60},// 60 secs per min, ...
19            h: { dsp: "Hrs", inc: settings.hInc, val: 0, max: 24, rate: 3600},
20            d: { dsp: "Day", inc: settings.dInc, val: 0, max: 365, rate: 86400}
21        }
22
23
24
25        var setResult = function () {
26            var total = 0;
27            for (var unit in tUnits) {
28                total = total + (tUnits[unit].val * tUnits[unit].rate)
29            }
30            $this[0].value = total;
31        }
32
33        // Calculate initialiation values
34
35        // increment value on up/down button and up/down keypress
36        var actionUpDown = function($input, goUp, selectIt = false ){
37            // get input unit type
38            var tUnit = $input.attr('tunit');
39
40            // get input starting value
41            var newVal = parseInt($input.val(), 10);
42            newVal = ( isNaN( newVal ) ? 0 : newVal );
43            newVal += ( goUp ? 1 : -1 ) * tUnits[tUnit].inc; 
44            
45            // check if newVal is out of range for input
46            // if applicable, increment/decrement sibling input
47            if (  newVal <= 0 || newVal >= tUnits[tUnit].max ) {
48                if ( newVal == 0 || ( newVal < 0 && $input.index() < 2 ) ){
49                    newVal = "00";
50                } else if ( $input.index() >= 2 ){
51                    let $nextUnit = $input.prev().prev();
52                    let nextUnitVal = parseInt($nextUnit.val());
53                    
54                    if ( newVal < 0 && nextUnitVal > 0 ) {
55                        $nextUnit.val( nextUnitVal - 1 ).trigger('blur');
56                        newVal = tUnits[tUnit].max - tUnits[tUnit].inc;
57                    } else if ( newVal > 0 ) {
58                        $nextUnit.val( nextUnitVal + 1).trigger('blur');
59                        newVal = "00";
60                    } else {
61                        newVal = "00";
62                    }
63                }
64            } 
65            
66            $input.val(newVal)[ selectIt ? 'select' : 'blur']();
67            return false;
68        }
69
70        // Build the HTML inputs
71        var $box = $('<div class="duration-box">');
72        var inputTypes = settings.display.split("");
73        var initVal = settings.initVal
74        inputTypes.forEach(function (unit) {
75            let initValForUnit = Math.floor(initVal / tUnits[unit].rate)
76            tUnits[unit].val = initValForUnit
77            initVal = initVal % tUnits[unit].rate
78            let inputVal = (tUnits[unit].val).toString().padStart(2,'0');
79            let $input = $('<input type="text" maxlength="2" class="duration duration-val">').attr('tunit',unit).val(inputVal);
80            let $label = $('<label class="duration">').html( tUnits[unit].dsp )
81
82            //add listeners
83            $input.on('focus',function(){ 
84                $lastInput = $( this );
85                this.select() 
86            });
87            $input.on('blur',function(){ 
88                if ( isNaN( this.value ) ) this.value = '00';
89                this.value = this.value.toString().padStart(2, 0);
90                tUnits[unit].val = parseInt(this.value)
91                setResult()
92            });
93            $input.on('keyup',function( e ){ 
94                // remove non-integer characters
95                this.value = this.value.replace(/\D/g,'');
96                    
97                // if up (38) or down (40) keypress, increment/decrement value
98                if ( e.which == 38 || e.which == 40 ) { 
99                    return actionUpDown( $(this), ( e.which == 38 ), true );
100                } 
101            });
102            $box.append( $input, $label );
103        });
104        var btnContainer = $('<span class="duration duration-updown"></span>');
105        var $btnUp = $( '<i class="fas fa-arrow-up"></i>');

106        var $btnDown = $( '<i class="fas fa-arrow-down"</i>');
107        btnContainer.append($btnUp,$btnDown);
108        $box.append(btnContainer);
109        $lastInput = $box.find('.duration-val').last();
110        
111        // Add button listeners
112        $btnUp.on('click',function(){ actionUpDown( $lastInput, true ); });
113        $btnDown.on('click',function(){ actionUpDown( $lastInput, false ); });
114
115        $this.append( $box );
116    };
117 
118}( jQuery ));