how to add comma at jQuery ui spinner counter value

Question

I'm trying to add comma at spinner value. I'm increasing the counter value with 250,000
So, increasing from initial value 0, it should be 250,000. then 500,000, then 750,000 then 1,000,000 and thus continuing it to ....... 10,000,000,... etc. Here is my fiddle

I tried to do it with step: 250,000. But, adding comma at that parameter surely has given error. So, how can I do it?

Answer 1

You could try something with the change event of the spinner and the focus event of the input on which the spinner is applied. It's not perfect, because the formatting will only be applied after losing focus, but it does work:

JavaScript:

$(".spinner").spinner({
    min: 0,
    step: 250000,
    change: function (event, ui) {
        var val = event.target.value;
        var newVal = "";

        for (var i = val.length - 1, counter = 0; i >= 0; i--) {
            if (counter == 3) {
                counter = 0;
                newVal = "," + newVal;
            }
            counter++;
            newVal = val[i] + newVal;
        }

        event.target.value = newVal;
    }
}).on("focus", function () {
    $(this).val($(this).val().replace(/,/g, ""));
});

FIDDLE