andrewinc,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Time</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function two(a) {
return (9 < a ? "" : "0") + a
}
$.widget("ui.timespinner", $.ui.spinner, {
options: {
step: 6E4,
page: 60
},
_parse: function(a) {
if ("string" === typeof a) {
if (Number(a) == a) return Number(a);
a = a.match(/\d+/g);
(!a || 2 > a.length) && (a = [0, 0]);
a[0] *= 36E5;
a[1] *= 6E4;
return a[0] + a[1]
}
return a
},
_format: function(a) {
a /= 6E4;
var hours = a / 60 | 0;
a %= 60;
return two(hours) + ":" + two(a)
}
});
$(function() {
$("#spinner").timespinner({
min: 0,
max: 864E5
});
$("#spinner").timespinner("value", 342E4)
});
</script>
</head>
<body>
<p>
<label for="spinner">Time spinner:</label>
<input id="spinner" name="spinner" value="00:00 PM">
</p>
</body>
</html>