jQuery ui spinner - 使用时间（小时）

Question

使用 jQuery 1.9.1 和 jQuery-ui 1.10.3。想要使用微调器进行时间（小时）控制。除了拥有一组有限的值之外，我还想让它在超过 23 后翻转到 0。我让那部分工作。我遇到的问题是它何时开始。

我用于微调器的代码：

$(function() {
    $("#mystarttime").spinner({
        numberFormat: "d2",
        spin: function(event, ui) {
            if (ui.value > 23) {
                $(this).spinner("value", 0);
                return false;
                    }
            else if (ui.value < 0) {
                $(this).spinner("value", 23);
                return false;
                    }
            console.log("start spin - " + ui.value );
            }
        });
});

输入：

<label for="mystarttime">Start Time (hr):</label>
<input type="text" id="mystarttime" name="startTimeVal">

页面加载时，微调器中没有任何内容。如果我单击微调器上的向上箭头（以递增），spin 事件将触发并且我在控制台中收到一条消息，显示值 (1)。但是，如果我单击微调器上的向下箭头，spin 事件不会触发，但我会在输入框中得到 23。直到我再次单击向下箭头，spin 事件才会触发，并且输入（和控制台）都显示 22。

如果我单击一次向下箭头，输入框会显示 23（但不会触发任何事件）。 之后，如果我单击一次向上箭头，输入显示 00 （但没有事件触发）。

我一定是做错了什么或查看了错误的事件来检测翻转和更改，但没有找到一个既翻转又看到事件的好例子。将不胜感激有关如何解决此问题的任何想法或建议。

Answer 1

spin: 在您自己设置值时不会被调用。但是 change: 被调用 - 这应该可以解决问题：

function log(value) {
 console.log(value);
}

$(function() {
    $("#mystarttime").spinner({
        numberFormat: "d2",
        spin: function(event, ui) {
            if (ui.value > 23) {
                $(this).spinner("value", 0);
                return false;
                    }
            else if (ui.value < 0) {
                $(this).spinner("value", 23);
                return false;
                    }
            log(ui.value);
        },
        change: function(event, ui) {
            log($(this).spinner("value"));
        }
        });

});