onspin event (Spinner)

The onspin event activates when the up or down arrow is clicked on a spinner element. The onspin event receives 3 special variables:

value - The value within the box before the spin operation was initiated, represented as a string
newValue - The new calculated value after the spin operation has completed, represented as a number
increment - Positive or negative number depending on whether the user has clicked the up or the down arrow; the default values for increment are 1 and -1; however this can be modified by changing the "increment value" property on the widget
spinner - A reference to the spinner element

If the onspin expression evaluates to a number or a string, that value will be used to populate the spinner element instead of utilizing the default spinner logic for incrementing or decrementing the spinner value.

Examples:

The following will refresh the screen when the spinner arrows are used.

onspin: pui.click();

The following example doubles the increment:

onspin: Number(value) + increment * 2;

The following is an example of a custom time spinner:

onspin: timeOnSpin(value, increment);

// This function increments or decrements the minutes portion of a time
function timeOnSpin(timeValue, increment) {
  // Assume time format of hh:mm
  var hours = timeValue.split(":")[0];
  var minutes = Number(timeValue.split(":")[1]);
  if (isNaN(minutes)) {
    // Invalid time format, don't change value in the box
    return timeValue;
  }
  else {
    minutes += increment;
    if (minutes > 59) minutes = 0;
    if (minutes < 0) minutes = 59;
    minutes = String(minutes);
    if (minutes.length == 1) minutes = "0" + minutes;
    return hours + ":" + minutes;
  }
}