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?

Dom · Accepted Answer · 2013-06-28T14:34:45.963

8

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:

UPDATE:

Here is the reference to globalize.js.

edited Jun 28 '13 at 14:34

answered Jan 15 '13 at 20:37

Dom

38,906
12
52
81

thanks for appending `globalize.js` code! I can't +1 you enough – Katia Jun 21 '14 at 20:15

score 5 · Answer 2 · answered Feb 05 '15 at 14:49

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

jquery ui spinner for minutes

2 Answers2

Linked