jquery ui spinner for minutes

Question

Im trying to use the jquery ui spinner for a minutes input. Currently it works 0 - 60 but I want the single digits to be 00,01..09 double digits.

According to the docs I should use globalize plugin and set numberFormat: 'mm' but that threw an error. In the console I looked at globalize js and 'mm' option is inside 'formatDate'. So I tried:

$('.minute-spinner').spinner({culture: "en-US",formatDate: "mm"});

but that didn't do anything. Anyone know how to make a spinner always show 2 digits?

Answer 1

The entire Globalize library is overkill if you just wish to employ numberFormat for JQuery spinner.

I omit Globalize and just add the following code somewhere in my js ...

// mock Globalize numberFormat for mins and secs using jQuery spinner ...
if (!window.Globalize) window.Globalize = {
        format: function(number, format) {
                number = String(this.parseFloat(number, 10) * 1);
                format = (m = String(format).match(/^[nd](\d+)$/)) ? m[1] : 2;
                for (i = 0; i < format - number.length; i++)
                        number = '0'+number;
                return number;
        },
        parseFloat: function(number, radix) {
                return parseFloat(number, radix || 10);
        }
};

Then add one of the following to your spinner cfg as per answer by Dom ...

numberFormat: 'd2' // 0 pad to length of 2
numberFormat: 'n2' // same
numberFormat: 'd5' // 0 pad to length of 5
numberFormat: 'n5' // same 

Answer 2

Unfortunately, .spinner() does not have a formatDate option.

Try this:

$('.minute-spinner').spinner({ numberFormat: "d2" });

DEMO: http://jsfiddle.net/dirtyd77/SA7Gk/

Hope this helps and let me know if you have any questions!

---

REFERENCES:

• https://github.com/jquery/globalize#numbers
• http://api.jqueryui.com/spinner/#option-numberFormat

---

UPDATE:

Here is the reference to globalize.js.