Any Good Number Picker for JQuery (or Javascript)?

Question

Are there any good number picker for jquery (or standalone js)?

I would like a number picker where there is a max and min number that the user can choose from. Also, it have other options such as displaying odd number or even number or prime number or a range of number whereby some numbers in between are skipped.

Answer 1

Using a select to do this you can create an array with the numbers to skip and do a for loop to write the options:

int minNumber = 0;
int maxNumber = 10;

int[] skipThese = { 5, 7 };

for (int i = minNumber; i <= maxNumber; i++)
{
    if(!skipThese.Contains(i)) Response.Write(String.Concat("<option value=\"", i, "\">", i, "</option>"));
}

You can do this with razor or any other way to output the HTML.

You can also do this with jQuery, dynamicaly, following the same idea:

$(document).ready(function() {
    var minNumber = 0;
    var maxNumber = 10;

    var skipThese = [5, 7];

    for (var i = minNumber; i <= maxNumber; i++) {
        if ($.inArray(i, skipThese) == -1) $('#selectListID').append("<option value=\"" + i + "\">" + i + "</option>");
    }
});

Edit: Or you can use the C# code above in an aspx page and load it with AJAX from the page:

Create a select box in the page:

<select name="numPicker" id="numPicker">
    <option>Loading...</option>
</select>

In a script in this page you could use jQuery's ajax() to fetch the data and populate the <select>:

$(document).ready(function() {
    var numPickerSelect = $("#numPicker");
    $.ajax({
        url: 'url/to/page.aspx',
        type: 'post'
        success: function(data) {
            numPickerSelect.find('option').remove(); // Remove the options in the select field
            numPickerSelect.append(data); // Load the content generated by the server into the select field
        },
        error: function() {
            alert('An error has ocurred!');
        }
    });
    //Or use this (not sure if will work)
    numPickerSelect.load("url/to/page.aspx");
});

Answer 2

I have used this. You should be able to modify to add extra options such as min and max fairly easily.

// Make a control only accept numeric input
// eg, $("#myedit").numeric()
//  $("#myedit").numeric({alow: ' ,.'})
//  $("#myedit").numeric({decimals: 2})

(function($) {

    $.fn.alphanumeric = function(p) {

        if (p == 'destroy') {
            $(this).unbind('keypress');
            $(this).unbind('blur');
            return;
        }

        p = $.extend({
            ichars: "!@#$%^&*()+=[]\\\';,/{}|\":<>?~`.- ",
            nchars: "",
            allow: "",
            decimals: null
        }, p);

        return this.each
            (
                function() {

                    if (p.nocaps) p.nchars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                    if (p.allcaps) p.nchars += "abcdefghijklmnopqrstuvwxyz";

                    s = p.allow.split('');
                    for (i = 0; i < s.length; i++) if (p.ichars.indexOf(s[i]) != -1) s[i] = "\\" + s[i];
                    p.allow = s.join('|');

                    var reg = new RegExp(p.allow, 'gi');
                    var ch = p.ichars + p.nchars;
                    ch = ch.replace(reg, '');

                    var dp = p.decimals;

                    var isInteger = function(val) {
                        var objRegExp = /(^-?\d\d*$)/;
                        return objRegExp.test(val);
                    };

                    var isNumeric = function(val) {
                        // If the last digit is a . then add a 0 before testing so if they type 25. it will be accepted
                        var lastChar = val.substring(val.length - 1);
                        if (lastChar == ".") val = val + "0";

                        var objRegExp = new RegExp("^\\s*-?(\\d+(\\.\\d{1," + dp + "})?|\\.\\d{1," + dp + "})\\s*$", "g");
                        if (dp == -1)
                            objRegExp = new RegExp("^\\s*-?(\\d+(\\.\\d{1,25})?|\\.\\d{1,25})\\s*$", "g");

                        var result = objRegExp.test(val);
                        return result;
                    };
                    $(this).blur(function(e) {
                        var text = $(this).val();
                        if (dp != null) {
                            if (dp == 0) {
                                if (!isInteger(text)) {
                                    $(this).val('');
                                    e.preventDefault();
                                }
                            }
                            else {
                                if (!isNumeric(text)) {
                                    $(this).val('');
                                    e.preventDefault();
                                }
                            }
                        } else {
                            var c = text.split('')
                            for (i = 0; i < text.length; i++) {
                                if (ch.indexOf(c[i]) != -1) {
                                    $(this).val('');
                                    e.preventDefault();
                                };
                            }
                        }
                    });
                    $(this).keypress
                        (
                            function(e) {

                                switch (e.which) {
                                    //Firefox fix, for ignoring specific presses             
                                    case 8: // backspace key
                                        return true;
                                    case 46: // delete key
                                        return true;
                                };

                                if (dp != null) {

                                    if (e.which == 32) { e.preventDefault(); return false; }

                                    var range = getRange(this);
                                    var typed = String.fromCharCode(e.which);
                                    var text = $(this).val().substr(0, range.start) + typed + $(this).val().substr(range.start);

                                    if (dp == 0) {
                                        if (!isInteger(text)) e.preventDefault();
                                    }
                                    else {
                                        if (!isNumeric(text)) e.preventDefault();
                                    }
                                    return;
                                }

                                if (!e.charCode) k = String.fromCharCode(e.which);
                                else k = String.fromCharCode(e.charCode);

                                if (ch.indexOf(k) != -1) e.preventDefault();
                                if (e.ctrlKey && k == 'v') e.preventDefault();
                            }
                        );

                    $(this).bind('contextmenu', function() { return false });

                }
            );

    };

    $.fn.numeric = function(p) {

        if (p == 'destroy') {
            $(this).unbind('keypress');
            $(this).unbind('blur');
            return;
        }
        var az = "abcdefghijklmnopqrstuvwxyz";
        az += az.toUpperCase();

        var opts = {};

        if (!isNaN(p)) {
            opts = $.extend({
                nchars: az
            }, { decimals: p });
        } else {
            opts = $.extend({
                nchars: az
            }, p);
        }
        return this.each(function() {
            $(this).alphanumeric(opts);
        }
        );

    };

    $.fn.integer = function(p) {

        if (p == 'destroy') {
            $(this).unbind('keypress');
            $(this).unbind('blur');
            return;
        }

        var az = "abcdefghijklmnopqrstuvwxyz";
        az += az.toUpperCase();

        p = {
            nchars: az,
            allow: '-',
            decimals: 0
        };

        return this.each(function() {
            $(this).alphanumeric(p);
        }
        );
    };

    $.fn.alpha = function(p) {

        if (p == 'destroy') {
            $(this).unbind('keypress');
            $(this).unbind('blur');
            return;
        }
        var nm = "1234567890";

        p = $.extend({
            nchars: nm
        }, p);

        return this.each(function() {
            $(this).alphanumeric(p);
        }
        );

    };

})(jQuery);