JSFiddle - React, Tailwind, and code Playground

by Katia Aleid

HTML

<p>
    <input id="hours" name="value" value=0 size=3 readonly />
    <input id="minutes" name="value" value=0 size=2 readonly />
    <input id="seconds" name="value" value=0 size=2 readonly />
</p>

JavaScript

function pad(str, max) {
    str = str.toString();
    return str.length < max ? pad("0" + str, max) : str;
}

$(function () {
    $('#seconds').spinner({
        spin: function (event, ui) {
            if (ui.value >= 60) {
                $(this).spinner('value', pad(ui.value - 60, 2));
                $('#minutes').spinner('stepUp');
                return false;
            } else if (ui.value < 0) {
                $(this).spinner('value', pad(ui.value + 60, 2));
                $('#minutes').spinner('stepDown');
                return false;
            } else {
                $(this).spinner('value', pad(ui.value, 2));
                return false;
            }
        }
    });
    $('#minutes').spinner({
        spin: function (event, ui) {
            if (ui.value >= 60) {
                $(this).spinner('value', pad(ui.value - 60, 2));
                $('#hours').spinner('stepUp');
                return false;
            } else if (ui.value < 0) {
                $(this).spinner('value', pad(ui.value + 60, 2));
                $('#hours').spinner('stepDown');
                return false;
            } else {
                $(this).spinner('value', pad(ui.value, 2));
                return false;
            }
        }
    });
    $('#hours').spinner({
        min: 0
    });
});