JSFiddle - React, Tailwind, and code Playground
HTML
<p>
<input id="days" name="value" value=0 size=3/>
<input id="hours" name="value" value=0 size=3/>
<input id="minutes" name="value" value=0 size=2/>
<input id="seconds" name="value" value=10 size=2/>
</p>
JavaScript
$(function () {
$("input[name='value']").blur(function() {
var id = $(this).prop('id');
$("#" + id).spinner('stepUp');
$("#" + id).spinner('stepDown');
});
$('#seconds').spinner({
spin: function (event, ui) {
if (ui.value >= 60) {
$('#minutes').spinner('stepUp', ui.value / 60);
$(this).spinner('value', ui.value % 60);
return false;
} else if (ui.value < 0) {
if($('#minutes').spinner('value') > 0) {
$(this).spinner('value', ui.value + 60);
$('#minutes').spinner('stepDown');
}
return false;
}
}
});
$('#minutes').spinner({
spin: function (event, ui) {
if (ui.value >= 60) {
$('#hours').spinner('stepUp', ui.value / 60);
$(this).spinner('value', ui.value % 60);
return false;
} else if (ui.value < 0) {
if($('#hours').spinner('value') > 0) {
$(this).spinner('value', ui.value + 60);
$('#hours').spinner('stepDown');
}
return false;
}
}
});
$('#hours').spinner({
spin: function (event, ui) {
if (ui.value >= 24) {
$('#days').spinner('stepUp', ui.value / 24);
$(this).spinner('value', ui.value % 24);
return false;
} else if (ui.value < 0) {
if($('#days').spinner('value') > 0) {
$(this).spinner('value', ui.value + 24);
$('#days').spinner('stepDown');
}
return false;
}
}
});
$('#days').spinner({
min: 0});
});