jquery-uijquery-ui-spinner

jQuery UI Spinner with letters A-Z or other custom range


Is there a way to customize jQuery UI spinner, so that A-Z letters (or any custom range) is possible?


Solution

  • Yes, this is possible. Here's a simple example using A-Z, adapted from the provided time example:

    $.widget("ui.alphaspinner", $.ui.spinner, {
        options: {
            min: 65,
            max: 90
        },
        _parse: function(value) {
            if (typeof value === "string") {
                return value.charCodeAt(0);
            }
            return value;
        },
        _format: function(value) {
            return String.fromCharCode(value);
        }
    });
    

    Usage:

    $("#my-input").alphaspinner();
    

    Example: http://jsfiddle.net/4nwTc/1/

    The above example creates a new widget called alphaspinner that inherits from spinner. You can do this for just one spinner with the following:

    $(function() {
        var spinner = $("#alpha-spinner").spinner({
            min: 65,
            max: 90
        }).data("spinner");
    
        spinner._parse = function (value) {
            if (typeof value === "string") {
                return value.charCodeAt(0);
            }
            return value;        
        };
    
        spinner._format = function (value) {
            return String.fromCharCode(value);        
        }
    });​
    

    Example: http://jsfiddle.net/4nwTc/2/