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

Question

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

Answer 1

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/