format

a number format that should be applied to a text input

string|object format;

Example

// setting delimiters according to the locale rules
{ view:"text", value:'12345678', name:"b", label:"Comma", format:"1.111,00" },

Related samples

Details

The format string must be set according to the following rules:

1. The decimal part and the decimal delimiter

The decimal part of a number is defined with a non-digit delimiter and 1 or more zeros. The size of the decimal part equals to the number of zeros. The integer part is set by any number of ones.

For example, to display numbers with 3 digits in the decimal part, set the format string to:

format:"1.000"  // dot
format:"1,000"  // comma

2. The integer part and the group delimiter

The integer part is set with 1 or more ones. You can divide the integer part with the group delimiter, which is any non-digit character preceded and followed by at least 1 one. The size of the group is defined by the number of ones.

For example, to separate the integer part with a comma after each 3rd digit, set the format string like this:

format:"1,111.000"  // with the decimal part
format:"1,111"      // without the decimal part

3. Other group delimiters

You can also separate numbers in groups by any delimiter, e.g. to display phone numbers:

format:"1-11"   //1-23-45-56

Custom Number Formats

To set a custom number format, specify the property value as an object with two attributes:

  • parse - the function that handles a real value kept by the control
  • edit - the function that handles a value that will be rendered
{ view:"text", value:'12345678', name:"f", label:"Phone", format:{
    parse: function(a){ return a.replace(/[^0-9]*/g,""); },
    edit: function(a){
        function chunk(a, n){
            return a.length > n ? (a.substr(0,n) + "-" + chunk(a.substr(n), n)): a;
        }
        return (a.length ? "+": "") + chunk(a, 3);
    },
}}
Back to top