Formatting Dates and Numbers (React)

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.

This example uses React.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; // class App extends React.Component { constructor(props) { super(props); // this.state = { dateSamples: [ { format: 'd', description: 'Short Date Pattern' }, { format: 'D', description: 'Long Date Pattern' }, { format: 'f', description: 'Full Date/Time Pattern (short time)' }, { format: 'F', description: 'Full Date/Time Pattern (long time)' }, { format: 't', description: 'Short Time Pattern' }, { format: 'T', description: 'Long Time Pattern' }, { format: "'Q'Q yyyy", description: 'Quarter/Year' }, { format: 'MMMM dd, yyyy', description: 'Custom format' } ], numberSamples: [ { specifier: 'n*', description: 'Number' }, { specifier: 'n*,', description: 'Number (thousands)' }, { specifier: 'n*,,', description: 'Number (millions)' }, { specifier: 'f*', description: 'Fixed-point' }, { specifier: 'g*', description: 'General (no trailing zeros)' }, { specifier: 'd*', description: 'Decimal (integers)' }, { specifier: 'x*', description: 'Hexadecimal (integers)' }, { specifier: 'c*', description: 'Currency' }, { specifier: 'c*€', description: 'Currency (explicit currency symbol)' }, { specifier: 'c* ', description: 'Currency (no currency symbol)' }, { specifier: 'p*', description: 'Percent' } ], numValue: 1234.5678, precision: 2, selectedValue: 'en' }; } render() { return <div className="container-fluid"> <p> <wjInput.Menu header='Culture' value={this.state.selectedValue} itemClicked={this._selectedCultureChanged.bind(this)}> <wjInput.MenuItem value="en">English (US)</wjInput.MenuItem> <wjInput.MenuItem value="en-GB">English (UK)</wjInput.MenuItem> <wjInput.MenuItem value="es">Spanish</wjInput.MenuItem> <wjInput.MenuItem value="de">German</wjInput.MenuItem> <wjInput.MenuItem value="it">Italian</wjInput.MenuItem> <wjInput.MenuItem value="fr">French</wjInput.MenuItem> <wjInput.MenuItem value="pt">Portuguese</wjInput.MenuItem> <wjInput.MenuItem value="ru">Russian</wjInput.MenuItem> <wjInput.MenuItem value="ja">Japanese</wjInput.MenuItem> <wjInput.MenuItem value="ko">Korean</wjInput.MenuItem> <wjInput.MenuItem value="zh">Chinese</wjInput.MenuItem> </wjInput.Menu> </p> <div className="panel panel-default"> <div className="panel-heading"> <h4 className="panel-title">Dates</h4> </div> <div className="panel-body"> <table className="table table-condensed"> <thead> <th>format</th> <th>description</th> <th>result</th> </thead> <tbody> {this.state.dateSamples.map((item) => { return <tr key={item.id}> <td> <b>{item.format}</b> </td> <td>{item.description}</td> <td>{this._formatDate(item.format)}</td> </tr>; })} </tbody> </table> </div> </div> <div className="panel panel-default"> <div className="panel-heading"> <h4 className="panel-title">Numbers</h4> </div> <div className="panel-body input-numbers"> <div className="form-group"> <label htmlFor="theValue">Value</label> <wjInput.InputNumber id="theValue" value={this.state.numValue} step={1} valueChanged={this._numberValueChanged.bind(this)}> </wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="thePrecision">Precision</label> <wjInput.InputNumber id="thePrecision" step={1} min={0} max={10} value={this.state.precision} valueChanged={this._precisionValueChanged.bind(this)}> </wjInput.InputNumber> </div> </div> <div className="panel-body"> <table className="table table-condensed"> <thead> <th>specifier</th> <th>description</th> <th className="text-right">result</th> </thead> <tbody> {this.state.numberSamples.map((item) => { return <tr key={item.id}> <td> <b>{item.specifier}</b> </td> <td>{item.description}</td> <td className="text-right">{this._formatNumber(item.specifier)}</td> </tr>; })} </tbody> </table> </div> </div> </div>; } _formatDate(format) { return wijmo.Globalize.format(new Date(), format); } _formatNumber(specifier) { let format = specifier.replace('*', this.state.precision.toString()); return wijmo.Globalize.format(this.state.numValue, format); } _loadCulture(culture) { // apply new culture to page let url = `node_modules/@grapecity/wijmo.cultures/wijmo.culture.${culture}.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 = () => { wijmo.Control.refreshAll(document.querySelector('.input-numbers')); this.forceUpdate(); }; // script.src = url; // document.head.appendChild(script); } _selectedCultureChanged(sender) { if (sender.selectedValue) { this.setState({ selectedValue: sender.selectedValue }); this._loadCulture(sender.selectedValue); } } _numberValueChanged(sender) { this.setState({ numValue: sender.value }); } _precisionValueChanged(sender) { this.setState({ precision: sender.value }); } } ReactDOM.render(<App />, document.getElementById('app'));
<!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 id="app"></div> </body> </html>
body { margin-bottom: 24px; } label { margin-right: 3px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: 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.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.grid.immutable': 'npm:@grapecity/wijmo.grid.immutable/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.react.chart.analytics": "npm:@grapecity/wijmo.react.chart.analytics/index.js", "@grapecity/wijmo.react.chart.animation": "npm:@grapecity/wijmo.react.chart.animation/index.js", "@grapecity/wijmo.react.chart.annotation": "npm:@grapecity/wijmo.react.chart.annotation/index.js", "@grapecity/wijmo.react.chart.finance.analytics": "npm:@grapecity/wijmo.react.chart.finance.analytics/index.js", "@grapecity/wijmo.react.chart.finance": "npm:@grapecity/wijmo.react.chart.finance/index.js", "@grapecity/wijmo.react.chart.hierarchical": "npm:@grapecity/wijmo.react.chart.hierarchical/index.js", "@grapecity/wijmo.react.chart.interaction": "npm:@grapecity/wijmo.react.chart.interaction/index.js", "@grapecity/wijmo.react.chart.radar": "npm:@grapecity/wijmo.react.chart.radar/index.js", "@grapecity/wijmo.react.chart": "npm:@grapecity/wijmo.react.chart/index.js", "@grapecity/wijmo.react.core": "npm:@grapecity/wijmo.react.core/index.js", "@grapecity/wijmo.react.gauge": "npm:@grapecity/wijmo.react.gauge/index.js", "@grapecity/wijmo.react.grid.detail": "npm:@grapecity/wijmo.react.grid.detail/index.js", "@grapecity/wijmo.react.grid.filter": "npm:@grapecity/wijmo.react.grid.filter/index.js", "@grapecity/wijmo.react.grid.grouppanel": "npm:@grapecity/wijmo.react.grid.grouppanel/index.js", '@grapecity/wijmo.react.grid.search': 'npm:@grapecity/wijmo.react.grid.search/index.js', "@grapecity/wijmo.react.grid.multirow": "npm:@grapecity/wijmo.react.grid.multirow/index.js", "@grapecity/wijmo.react.grid.sheet": "npm:@grapecity/wijmo.react.grid.sheet/index.js", '@grapecity/wijmo.react.grid.transposed': 'npm:@grapecity/wijmo.react.grid.transposed/index.js', '@grapecity/wijmo.react.grid.immutable': 'npm:@grapecity/wijmo.react.grid.immutable/index.js', "@grapecity/wijmo.react.grid": "npm:@grapecity/wijmo.react.grid/index.js", "@grapecity/wijmo.react.input": "npm:@grapecity/wijmo.react.input/index.js", "@grapecity/wijmo.react.olap": "npm:@grapecity/wijmo.react.olap/index.js", "@grapecity/wijmo.react.viewer": "npm:@grapecity/wijmo.react.viewer/index.js", "@grapecity/wijmo.react.nav": "npm:@grapecity/wijmo.react.nav/index.js", "@grapecity/wijmo.react.base": "npm:@grapecity/wijmo.react.base/index.js", 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.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: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);