Formatting Dates and Numbers

To globalize your Wijmo application, include a reference to the appropriate culture file after loading Wijmo. Dates are formatted using the Globalize.formatDate function, and numbers are formatted using the Globalize.formatNumber function. This sample uses these methods to shows the formats for some of the supported cultures.

Learn about FlexGrid | Globalization Documentation | Globalize API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; //cultures import "@grapecity/wijmo.cultures/wijmo.culture.en"; import "@grapecity/wijmo.cultures/wijmo.culture.en-GB"; import "@grapecity/wijmo.cultures/wijmo.culture.es"; import "@grapecity/wijmo.cultures/wijmo.culture.de"; import "@grapecity/wijmo.cultures/wijmo.culture.it"; import "@grapecity/wijmo.cultures/wijmo.culture.fr"; import "@grapecity/wijmo.cultures/wijmo.culture.pt"; import "@grapecity/wijmo.cultures/wijmo.culture.ru"; import "@grapecity/wijmo.cultures/wijmo.culture.ja"; import "@grapecity/wijmo.cultures/wijmo.culture.ko"; import "@grapecity/wijmo.cultures/wijmo.culture.zh"; wijmo.changeCulture("en"); // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // select culture let theCulture = new input.ComboBox('#theCulture', { displayMemberPath: 'name', itemsSource: [ { name: 'English (US)', key: 'en' }, { name: 'English (UK)', key: 'en-GB' }, { name: 'Spanish', key: 'es' }, { name: 'German', key: 'de' }, { name: 'Italian', key: 'it' }, { name: 'French', key: 'fr' }, { name: 'Portuguese', key: 'pt' }, { name: 'Russian', key: 'ru' }, { name: 'Japanese', key: 'ja' }, { name: 'Korean', key: 'ko' }, { name: 'Chinese', key: 'zh-CN' } ], selectedIndexChanged: (sender) => { wijmo.changeCulture(sender.selectedItem.key) .then(() => updateTables()); } }); // // initialize value and precision let theValue = new input.InputNumber('#theValue', { value: 1234.5678, step: 1, valueChanged: updateTables }); let thePrecision = new input.InputNumber('#thePrecision', { value: 2, step: 1, min: 0, max: 10, valueChanged: updateTables }); // // update the tables updateTables(); // function updateTables() { // update dates let theDate = new Date(), rows = document.body.querySelectorAll('#tblDates tbody tr'); // for (let i = 0; i < rows.length; i++) { let cells = rows[i].children, fmt = cells[0].textContent; // cells[2].textContent = wijmo.Globalize.format(theDate, fmt); } // // update numbers rows = document.body.querySelectorAll('#tblNumbers tbody tr'); for (let i = 0; i < rows.length; i++) { let cells = rows[i].children, fmt = cells[0].textContent.replace('*', thePrecision.value.toString()); // cells[2].textContent = wijmo.Globalize.format(theValue.value, fmt); } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Globalization/Formatting</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <label for="theCulture">Culture:</label> <div id="theCulture"> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Dates</h4> </div> <div class="panel-body"> <table id="tblDates" class="table table-condensed"> <thead> <th>format</th> <th>description</th> <th>result</th> </thead> <tbody> <tr> <td><b>d</b></td> <td>Short Date Pattern</td> <td>xx</td> </tr> <tr> <td><b>D</b></td> <td>Long Date Pattern</td> <td>xx</td> </tr> <tr> <td><b>f</b></td> <td>Full Date/Time Pattern (short time)</td> <td>xx</td> </tr> <tr> <td><b>F</b></td> <td>Full Date/Time Pattern (long time)</td> <td>xx</td> </tr> <tr> <td><b>t</b></td> <td>Short Time Pattern</td> <td>xx</td> </tr> <tr> <td><b>T</b></td> <td>Long Time Pattern</td> <td>xx</td> </tr> <tr> <td><b>'Q'Q yyyy</b></td> <td>Quarter/Year</td> <td>xx</td> </tr> <tr> <td><b>MMMM dd, yyyy</b></td> <td>Custom format</td> <td>xx</td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Numbers</h4> </div> <div class="panel-body"> <div class="form-group"> <label for="theValue">Value</label> <div id="theValue"> </div> </div> <div class="form-group"> <label for="thePrecision">Precision</label> <div id="thePrecision"> </div> </div> </div> <div class="panel-body"> <table id="tblNumbers" class="table table-condensed"> <thead> <th>specifier</th> <th>description</th> <th class="text-right">result</th> </thead> <tbody> <tr> <td><b>n*</b></td> <td>Number</td> <td class="text-right">xx</td> </tr> <tr> <td><b>n*,</b></td> <td>Number (thousands)</td> <td class="text-right">xx</td> </tr> <tr> <td><b>n*,,</b></td> <td>Number (millions)</td> <td class="text-right">xx</td> </tr> <tr> <td><b>f*</b></td> <td>Fixed-point</td> <td class="text-right">xx</td> </tr> <tr> <td><b>g*</b></td> <td>General (no trailing zeros)</td> <td class="text-right">xx</td> </tr> <tr> <td><b>d*</b></td> <td>Decimal (integers)</td> <td class="text-right">xx</td> </tr> <tr> <td><b>x*</b></td> <td>Hexadecimal (integers)</td> <td class="text-right">xx</td> </tr> <tr> <td><b>c*</b></td> <td>Currency</td> <td class="text-right">xx</td> </tr> <tr> <td><b>c*€</b></td> <td>Currency (explicit currency symbol)</td> <td class="text-right">xx</td> </tr> <tr> <td><b>c*&#x200b;</b></td> <!-- &#x200b; is a zero-width space --> <td>Currency (no currency symbol)</td> <td class="text-right">xx</td> </tr> <tr> <td><b>p*</b></td> <td>Percent</td> <td class="text-right">xx</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
body { margin-bottom: 24px; } label { margin-right: 3px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);