Formats in EJ2 JavaScript Numerictextbox control

29 Aug 20237 minutes to read

You can format the value of NumericTextBox using format property. The value will be displayed in the specified format when the component is in focused out state. The format string supports both the standard numeric format string and custom numeric format string.

Standard formats

From the standard numeric formats, you can use the numeric related format specifiers such as n,p and c in the NumericTextBox component. By using these format specifiers, you can achieve the percentage and currency textbox behavior also.

The below example demonstrates percentage and currency formats.

index.ts
index.html
styles.css
import {NumericTextBox} from '@syncfusion/ej2-inputs';

/* 'p' specifier */

let percent: NumericTextBox = new NumericTextBox({
    // sets percentage with 2 numbers of decimal places format
    format: 'p2',
    value: 0.5,
    min: 0,
    max: 1,
    step: 0.01,
    placeholder: 'Percentage format',
    floatLabelType: 'Auto'
});

percent.appendTo('#percent');

/* 'c' specifier */

let currency: NumericTextBox = new NumericTextBox({
    // sets currency with 2 numbers of decimal places format
    format: 'c2'
    value: 10,
    placeholder: 'Currency format',
    floatLabelType: 'Auto'
});

currency.appendTo('#currency');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <input id="percent" type="text">
        </div>
        <div class="wrap">
          <input id="currency" type="text">
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 35px auto;
  width: 240px;
  padding-top: 30px;
}

Custom formats

From the custom numeric format string, you can provide any custom format by combining one or more custom specifiers.

The below examples demonstrate format the value by using currency format string # and 0.

index.ts
index.html
styles.css
import {NumericTextBox} from '@syncfusion/ej2-inputs';

/* '#' specifier */

let numeric: NumericTextBox = new NumericTextBox({
    // sets the format using custom format string `#`
    format: '###.##',
    value: 10,
    placeholder: 'Custom format string #',
    floatLabelType: 'Auto'
});

numeric.appendTo('#numeric');

/* '0' specifier */

let numeric1: NumericTextBox = new NumericTextBox({
    // sets the format using custom format string `0`
    format: '000.00',
    value: 10,
    placeholder: 'Custom format string 0',
    floatLabelType: 'Auto'
});

numeric1.appendTo('#numeric1');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component with Custom Format">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <input id="numeric" type="text">
        </div>
        <div class="wrap">
          <input id="numeric1" type="text">
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 35px auto;
  width: 240px;
  padding-top: 30px;
}