title: jQuery ui spinner - using for time (hours)
body: <p>Using jQuery 1.9.1 &amp; jQuery-ui 1.10.3.  Want to use a spinner for a time (hours) control.  In addition to having a finite set of values, I want to have it roll over to 0 once it has gone beyond 23.  I have that part working.  What I am having problems with is when it starts.  </p>
  
  <p>The code I use for the spinner:</p>
  
  <pre><code>$(function() {
      $("#mystarttime").spinner({
          numberFormat: "d2",
          spin: function(event, ui) {
              if (ui.value &gt; 23) {
                  $(this).spinner("value", 0);
                  return false;
                      }
              else if (ui.value &lt; 0) {
                  $(this).spinner("value", 23);
                  return false;
                      }
              console.log("start spin - " + ui.value );
              }
          });
  });
  </code></pre>
  
  <p>The input:</p>
  
  <pre><code>&lt;label for="mystarttime"&gt;Start Time (hr):&lt;/label&gt;
  &lt;input type="text" id="mystarttime" name="startTimeVal"&gt;
  </code></pre>
  
  <p>When the page loads, the spinner has nothing in it.  If I click the up arrow on the spinner (to increment), the <code>spin</code> event fires &amp; I get a message in the console showing the value (1).  However, if I click the down arrow on the spinner, the <code>spin</code> event doesn't fire, but I get a 23 in the input box.  It's not until I click the down arrow again that the <code>spin</code> event fires, and the input (and console) both show 22.  </p>
  
  <p>If I click the down arrow once, the input box shows 23 (but no event fires).
  After that, if I click the up arrow once, the input shows 00 (but no event fires).  </p>
  
  <p>I must be doing something wrong or looking at the wrong event to detect the roll over &amp; change but haven't found a good example that both rolls over and sees the event.  Would appreciate any thoughts or suggestions on how to resolve this.  </p>