Skip to content

jQuery numericinput defaults and options

Maikel Bos edited this page Dec 28, 2020 · 5 revisions

The jQuery-numericinput is created with ease of use in mind. Almost all options can be configured using data-attributes. However, sometimes there is a need to override the options explicitly or influence the default behaviour. This is inherently true for the behaviour the input displays when an error occurs, which can only be defined as a function. This is possible both by changing the default options, and by explicitly passing the options when first creating the numericinput.

All defaults and options are defined as functions to make them as flexible as possible.

<input type="text" id="example-input" />

<script type="text/javascript">
    // Override the default to look at a different data-attribute
    $.fn.numericinput.defaults.getDecimalSeparator = function(element) {
        return $(element).data('decimal-symbol');
    }
    
    // For this specific numeric input, explicitly set the localization
    $('#example-input').numericinput({
        getDecimalDigits: function(element) {
            return 4;
        }
    });
</script>

Options

Below are all options that you can provide your own implementation of.

  • getDecimalSeparator(element) should return the separator between the integer and decimal part of a number; any string is valid
  • getDecimalDigits(element) should return the number of digits in the decimal part of a number; any positive integer, including 0, is valid
  • getNegativeSymbol(element) should return the symbol used for negative numbers; any string is valid
  • getGroupSeparator(element) should return the separator between groups in the integer part of a number; any string is valid
  • getGroupSizes(element) should return the sizes (right to left, where the left-most group size will repeat)of groups in the integer part of a number; an array of positive integers with at least one number is expected
  • getMaximumValue(element) should return the maximum allowed number; any number is valid
  • getMinimumValue(element) should return the minimum allowed number; any number is valid
  • showError(element) is the function that is called when an error occurs; no return value is expected
  • hideError(element) is the function that is called for clearing the error; no return value is expected
  • getErrorDisplayDuration(element) should return the duration in milliseconds between the showError and hideError calls; any positive number is valid
Clone this wiki locally