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; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { readonly 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' } ]; // readonly 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; // private _culture = 'en'; get culture(): string { return this._culture; } set culture(value: string) { if (this._culture != value) { this._culture = value; this._loadCulture(value); } } // formatDate(format: string) { return wijmo.Globalize.format(new Date(), format); } // formatNumber(specifier: string) { let format = specifier.replace('*', this.precision.toString()); return wijmo.Globalize.format(this.numValue, format); } // private _loadCulture(culture: string) { // 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'); // invalidate all Wijmo controls to accept new culture script.onload = () => wijmo.Control.invalidateAll(); script.src = url; // document.head.appendChild(script); } } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!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"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <p> <wj-menu [(value)]="culture" [header]="'Culture'"> <wj-menu-item [value]="'en'">English (US)</wj-menu-item> <wj-menu-item [value]="'en-GB'">English (UK)</wj-menu-item> <wj-menu-item [value]="'es'">Spanish</wj-menu-item> <wj-menu-item [value]="'de'">German</wj-menu-item> <wj-menu-item [value]="'it'">Italian</wj-menu-item> <wj-menu-item [value]="'fr'">French</wj-menu-item> <wj-menu-item [value]="'pt'">Portuguese</wj-menu-item> <wj-menu-item [value]="'ru'">Russian</wj-menu-item> <wj-menu-item [value]="'ja'">Japanese</wj-menu-item> <wj-menu-item [value]="'ko'">Korean</wj-menu-item> <wj-menu-item [value]="'zh'">Chinese</wj-menu-item> </wj-menu> </p> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Dates</h4> </div> <div class="panel-body"> <table class="table table-condensed"> <thead> <th>format</th> <th>description</th> <th>result</th> </thead> <tbody> <tr *ngFor="let item of dateSamples"> <td><b>{{ item.format }}</b></td> <td>{{ item.description }}</td> <td>{{ formatDate(item.format) }}</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> <wj-input-number id="theValue" [(value)]="numValue" [step]="1"> </wj-input-number> </div> <div class="form-group"> <label for="thePrecision">Precision</label> <wj-input-number id="thePrecision" [(value)]="precision" [step]="1" [min]="0" [max]="10"> </wj-input-number> </div> </div> <div class="panel-body"> <table class="table table-condensed"> <thead> <th>specifier</th> <th>description</th> <th class="text-right">result</th> </thead> <tbody> <tr *ngFor="let item of numberSamples"> <td><b>{{ item.specifier }}</b></td> <td>{{ item.description }}</td> <td class="text-right">{{ formatNumber(item.specifier) }}</td> </tr> </tbody> </table> </div> </div> </div> body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <p> <wj-menu :header="'Culture: <b>' + selectedItem.text + '</b>'" displayMemberPath="text" :itemsSource="itemsSource" selectedValuePath="value" :selectedIndexChanged="selectedIndexChanged"> </wj-menu> </p> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Dates</h4> </div> <div class="panel-body"> <table class="table table-condensed"> <thead> <th>format</th> <th>description</th> <th>result</th> </thead> <tbody> <tr v-for="item of dateSamples" :key="item.id"> <td> <b>{{ item.format }}</b> </td> <td>{{ item.description }}</td> <td>{{ formatDate(item.format) }}</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> <wj-input-number id="theValue" :value="numValue" :valueChanged="numberValueChanged" :step="1"> </wj-input-number> </div> <div class="form-group"> <label for="thePrecision">Precision</label> <wj-input-number id="thePrecision" :value="precision" :valueChanged="precisionValueChanged" :step="1" :min="0" :max="10"> </wj-input-number> </div> </div> <div class="panel-body"> <table class="table table-condensed"> <thead> <th>specifier</th> <th>description</th> <th class="text-right">result</th> </thead> <tbody> <tr v-for="item of numberSamples" :key="item.id"> <td> <b>{{ item.specifier }}</b> </td> <td>{{ item.description }}</td> <td class="text-right">{{ formatNumber(item.specifier) }}</td> </tr> </tbody> </table> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import * as wijmo from '@grapecity/wijmo'; import '@grapecity/wijmo.input'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function() { return { itemsSource: [ { value: 'en', text: 'English (US)' }, { value: 'en-GB', text: 'English (UK)' }, { value: 'es', text: 'Spanish' }, { value: 'de', text: 'German' }, { value: 'it', text: 'Italian' }, { value: 'fr', text: 'French' }, { value: 'pt', text: 'Portuguese' }, { value: 'ru', text: 'Russian' }, { value: 'ja', text: 'Japanese' }, { value: 'ko', text: 'Korean' }, { value: 'zh', text: 'Chinese' } ], 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, selectedItem: { value: 'en', text: 'English (US)' } }; }, methods: { formatDate(format) { return wijmo.Globalize.format(new Date(), format); }, formatNumber(specifier) { let format = specifier.replace('*', this.precision.toString()); return wijmo.Globalize.format(this.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 = () => { this.$forceUpdate(); // invalidate all Wijmo controls to accept new culture wijmo.Control.invalidateAll(); }; // script.src = url; // document.head.appendChild(script); }, selectedIndexChanged(sender) { if (sender.selectedItem) { this.selectedItem = sender.selectedItem; this.loadCulture(sender.selectedItem.value); } }, numberValueChanged(sender) { this.numValue = sender.value; }, precisionValueChanged(sender) { this.precision = sender.value; } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } </style> <!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.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> 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 = { itemsSource: [ { value: 'en', text: 'English (US)' }, { value: 'en-GB', text: 'English (UK)' }, { value: 'es', text: 'Spanish' }, { value: 'de', text: 'German' }, { value: 'it', text: 'Italian' }, { value: 'fr', text: 'French' }, { value: 'pt', text: 'Portuguese' }, { value: 'ru', text: 'Russian' }, { value: 'ja', text: 'Japanese' }, { value: 'ko', text: 'Korean' }, { value: 'zh', text: 'Chinese' } ], 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, selectedItem: { value: 'en', text: 'English (US)' } }; } render() { return <div className="container-fluid"> <p> <wjInput.Menu header={`Culture: <b>${this.state.selectedItem.text}</b>`} displayMemberPath="text" itemsSource={this.state.itemsSource} initialized={this._menuInitialized.bind(this)} selectedValuePath="value" selectedIndexChanged={this._selectedIndexChanged.bind(this)}> </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>; } _menuInitialized(sender) { this.setState({ selectedItem: sender.selectedItem }); } _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); } _selectedIndexChanged(sender) { if (sender.selectedValue) { this.setState({ selectedItem: sender.selectedItem }); 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; }