The answers on this page are correct and helpful. I found, however, that I was getting bad behaviour when someone was typing a value in the field. Each key press seems to fire a "spinstop" event too. Further, the keypresses were bypassing the field formatting and options.step. Fortunately we can examine the incoming event to see what's actually happening. There may be better ways but I thought I'd share anyway.

// Abstract to a function to allow for multiple binding types
function createSpinner(defaultOptions) {
    return {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = $.extend(true, {}, allBindingsAccessor().spinnerOptions, defaultOptions);
            var widget = $(element);
            var observable = valueAccessor();

            widget.spinner(options);

            // handle field changes onblur [copies field -&gt; model]
            ko.utils.registerEventHandler(element, "blur", function (event) {
                var inputValue = Number(widget.spinner("value"));
                var modelValue = observable();
                if (inputValue !== modelValue) {
                    // Set the widget (this forces formatting and rounding) - does not fire events
                    widget.spinner("value", inputValue);
                    // Read the value back out (saves us rounding)
                    var numberValue = Number(widget.spinner("value"));
                    // Set the observable
                    observable(numberValue);
                }
            });

            // handle other field changes
            ko.utils.registerEventHandler(element, "spinstop", function (event) {
                // jQuery.spinner spinstop is a bit overzealous with its spinstop event.
                if (event.keyCode !== undefined) {
                    // If it has a keyCode someone is typing... so don't interfere
                } else if (event.originalEvent &amp;&amp; event.originalEvent.type === "mouseup") {
                    // This is an *actual* spinstop
                    var numberValue = Number(widget.spinner("value"));
                    observable(numberValue);
                }
            });

            // handle disposal
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                widget.spinner("destroy");
            });
        },
        update: function (element, valueAccessor) {
            // [copies model -&gt; field]
            var widget = $(element);
            var observable = valueAccessor();
            var inputValue = Number(widget.spinner("value"));
            var modelValue = observable();
            if (inputValue !== modelValue) {
                widget.spinner("value", modelValue);
            }
        }
    };
}
ko.bindingHandlers.moneyspin = createSpinner({ numberFormat: 'C0', culture: 'en-GB', min: 0, incremental: true });
ko.bindingHandlers.intspin = createSpinner({ numberFormat: 'n0', culture: 'en-GB' });


jQueryUI Spinner widget with knockout
I have a giant spreadsheet with computer names and the date stamp that they last reported into our PGP server that I need to convert to a usable date/time, so I can sort the column by the time the computer last reported. The format of the field now is as follows:


  Mon Aug 01 09:08:25 CDT 2011


All of them have a 3-character day followed by a 3-character month followed by a 2 character date, and so on, so someone with some Excel skill should be able to parse it out.

Edit -- The closest I have come to getting it is using this formula:


  RIGHT(L2,4),VLOOKUP(MID(L2,5,3),MonthLookup!A:B,2,FALSE),MID(L2,9,2)


Where L2 is the field I am trying to convert and MonthLookup is a sheet with two columns, the first column being the 3 character month ("Jan", "Feb", etc.) and the second column being the numerical month (1, 2, etc.)

This gives me a usable date, but I need to keep the time as well.
