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.

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'; // 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' } ], selectedIndexChanged: (sender) => { // apply new culture to page let url = `node_modules/@grapecity/wijmo.cultures/wijmo.culture.${sender.selectedItem.key}.js`, scripts = document.getElementsByTagName('script'); // for (let i = 0; i < scripts.length; i++) { let script = scripts[i]; if (script.src.indexOf('/cultures/wijmo.culture.') > -1) { script.parentElement.removeChild(script); break; } } // let script = document.createElement('script'); script.onload = () => { updateTables(); // invalidate all Wijmo controls to accept new culture wijmo.Control.invalidateAll(); }; script.src = url; // document.head.appendChild(script); } }); // // 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>GrapeCity 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.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.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.pdf': 'npm:@grapecity/wijmo.pdf/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', '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);