DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy
    Your search did not match any results.
    Number Box

    Formatting

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

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    $(() => { $('#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"> <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=1.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/23.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></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; }