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.

Learn about FlexGrid | Globalization Documentation | Globalize API Reference

This example uses React.

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React, { useState } from 'react'; import useEvent from 'react-use-event-hook'; import * as wijmo from '@mescius/wijmo'; import * as wjInput from '@mescius/wijmo.react.input'; //cultures import "@mescius/wijmo.cultures/wijmo.culture.en"; import "@mescius/wijmo.cultures/wijmo.culture.en-GB"; import "@mescius/wijmo.cultures/wijmo.culture.es"; import "@mescius/wijmo.cultures/wijmo.culture.de"; import "@mescius/wijmo.cultures/wijmo.culture.it"; import "@mescius/wijmo.cultures/wijmo.culture.fr"; import "@mescius/wijmo.cultures/wijmo.culture.pt"; import "@mescius/wijmo.cultures/wijmo.culture.ru"; import "@mescius/wijmo.cultures/wijmo.culture.ja"; import "@mescius/wijmo.cultures/wijmo.culture.ko"; import "@mescius/wijmo.cultures/wijmo.culture.zh"; import './app.css'; const 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' } ]; const 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' } ]; wijmo.changeCulture("en"); function App() { const [count, setCount] = useState(0); const [numValue, setNumValue] = useState(1234.5678); const [precision, setPrecision] = useState(2); const [selectedValue, setSelectedValue] = useState('en'); const forceUpdate = () => setCount(count + 1); const formatDate = (format) => { return wijmo.Globalize.format(new Date(), format); }; const formatNumber = (specifier) => { let format = specifier.replace('*', precision.toString()); return wijmo.Globalize.format(numValue, format); }; const selectedCultureChanged = useEvent((sender) => { if (sender.selectedValue) { setSelectedValue(sender.selectedValue); wijmo.changeCulture(sender.selectedValue) .then(() => forceUpdate()); } }); const numberValueChanged = useEvent((sender) => { setNumValue(sender.value || numValue); }); const precisionValueChanged = useEvent((sender) => { setPrecision(sender.value || precision); }); return (<div className="container-fluid"> <wjInput.Menu header='Culture' value={selectedValue} itemClicked={selectedCultureChanged}> <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-CN">Chinese</wjInput.MenuItem> </wjInput.Menu> <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> <tr> <th>format</th> <th>description</th> <th>result</th> </tr> </thead> <tbody> {dateSamples.map((item, index) => { return <tr key={index}> <td> <b>{item.format}</b> </td> <td>{item.description}</td> <td>{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={numValue} step={1} valueChanged={numberValueChanged}> </wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="thePrecision">Precision</label> <wjInput.InputNumber id="thePrecision" step={1} min={0} max={10} value={precision} valueChanged={precisionValueChanged}> </wjInput.InputNumber> </div> </div> <div className="panel-body"> <table className="table table-condensed"> <thead> <tr> <th>specifier</th> <th>description</th> <th className="text-right">result</th> </tr> </thead> <tbody> {numberSamples.map((item, index) => (<tr key={index}> <td> <b>{item.specifier}</b> </td> <td>{item.description}</td> <td className="text-right">{formatNumber(item.specifier)}</td> </tr>))} </tbody> </table> </div> </div> </div>); } const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
<!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="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
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', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js", "@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js", "@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js", "@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js", "@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js", "@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js", "@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js", "@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js", "@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js", "@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js", '@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js', "@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js", "@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js", "@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js", "@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js", '@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js', "@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js", "@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js", '@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js', '@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js', '@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js', "@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js", "@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js", "@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js", "@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js", "@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js", "@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js", '@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js', '@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js', '@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/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', 'react-dom/client': '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', "react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.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);