JavaScript/jQuery Number Box - Formatting

Use the format property to specify the integer, currency, accounting, percent, and other formats of the JavaScript NumberBox value.

Backend API

$(() => { $('#integer').dxNumberBox({ format: '#', value: 14500, inputAttr: { 'aria-label': 'Integer' }, }); $('#currency').dxNumberBox({ format: '$ #,##0.##', value: 14500.55, inputAttr: { 'aria-label': 'Currency Format' }, }); $('#accounting').dxNumberBox({ format: '$ #,##0.##;($ #,##0.##)', value: -2314.12, inputAttr: { 'aria-label': 'Accounting Format' }, }); $('#percent').dxNumberBox({ format: '#0%', value: 0.15, step: 0.01, inputAttr: { 'aria-label': 'Percent Format' }, }); $('#fixedPoint').dxNumberBox({ format: '#,##0.00', value: 13415.24, inputAttr: { 'aria-label': 'Fixed Point Format' }, }); $('#weight').dxNumberBox({ format: '#0.## kg', value: 3.14, inputAttr: { 'aria-label': 'Weight Format' }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.6"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Integer format</div> <div class="dx-field-value"> <div id="integer"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Currency format</div> <div class="dx-field-value"> <div id="currency"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Accounting format</div> <div class="dx-field-value"> <div id="accounting"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Percent format</div> <div class="dx-field-value"> <div id="percent"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Fixed point format</div> <div class="dx-field-value"> <div id="fixedPoint"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Weight format</div> <div class="dx-field-value"> <div id="weight"></div> </div> </div> </div> </div> </body> </html>

.dx-field { margin-bottom: 20px; }

The format property can accept the following value types:

Predefined format
See the type property description for a list of accepted values.
Custom format string
Use a LDML pattern to specify a custom format. Refer to the following article for more information: Custom Format String.
Function
A function should apply a custom format to a value and return the formatted value as a string. Functions are useful for advanced formatting.
Object
Full format configuration. The object structure is shown in the format API section.