Parsing Dates and Numbers

To globalize your Wijmo application, include a reference to the appropriate culture file after loading Wijmo. Dates are parsed using the Globalize.parseDate function, and numbers are parsed using the Globalize.parseFloat 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.src = url; document.head.appendChild(script); } }); // // parse dates document.querySelector('#dtBtn').addEventListener('click', () => { let text = document.querySelector('#dtIn').value, fmt = document.querySelector('#dtFmt').value, value = wijmo.Globalize.parseDate(text, fmt), output = document.querySelector('#dtOutput'); // output.textContent = wijmo.isDate(value) ? 'Parsed OK: ' + wijmo.Globalize.format(value, fmt) : '** Could not parse date... **'; }); // // parse numbers document.querySelector('#numBtn').addEventListener('click', () => { let text = document.querySelector('#numIn').value, fmt = document.querySelector('#numFmt').value, value = wijmo.Globalize.parseFloat(text, fmt), output = document.querySelector('#numOutput'); // output.textContent = wijmo.isNumber(value) ? 'Parsed OK: ' + wijmo.Globalize.format(value, fmt) : '** Could not parse number... **'; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Globalization/Parsing</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"> <div class="form-group"> <label for="dtFmt">Input format:</label> <input id="dtFmt" value="d"> </div> <div class="form-group"> <label for="dtIn">Input string:</label> <input id="dtIn" value="12/31/2016"> </div> <button id="dtBtn" class="btn btn-default"> Parse Date </button> <span id="dtOutput"> </span> </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="numFmt">Input format:</label> <input id="numFmt" value="n2"> </div> <div class="form-group"> <label for="numIn">Input string:</label> <input id="numIn" value="123.456"> </div> <button id="numBtn" class="btn btn-default"> Parse Number </button> <span id="numOutput"> </span> </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 { dateResult = ''; numberResult = ''; // private _culture = 'en'; get culture(): string { return this._culture; } set culture(value: string) { if (this._culture != value) { this._culture = value; this._loadCulture(value); } } // parseDate(value: string, format: string) { let result = wijmo.Globalize.parseDate(value, format); // this.dateResult = wijmo.isDate(result) ? 'Parsed OK: ' + wijmo.Globalize.format(result, format) : '** Could not parse date... **'; } // parseNumber(value: string, format: string) { let result = wijmo.Globalize.parseFloat(value, format); // this.numberResult = wijmo.isNumber(result) ? 'Parsed OK: ' + wijmo.Globalize.format(result, format) : '** Could not parse number... **'; } // 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'); // 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/Parsing</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"> <div class="form-group"> <label id="dateFormat">Input format:</label> <input #dateFormat id="dateFormat" value="d"> </div> <div class="form-group"> <label for="dateInput">Input string:</label> <input #dateInput id="dateInput" value="12/31/2016"> </div> <button class="btn btn-default" (click)="parseDate(dateInput.value, dateFormat.value)" > Parse Date </button> <span> {{ dateResult }} </span> </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="numberFormat">Input format:</label> <input #numberFormat id="numberFormat" value="n2"> </div> <div class="form-group"> <label for="numberInput">Input string:</label> <input #numberInput id="numberInput" value="123.456"> </div> <button class="btn btn-default" (click)="parseNumber(numberInput.value, numberFormat.value)"> Parse Number </button> <span> {{ numberResult }} </span> </div> </div> </div> body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <p> <wj-menu :value="selectedValue" :header="'Culture'" :itemClicked="cultureChanged"> <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"> <div class="form-group"> <label id="dateFormat">Input format:</label> <input id="dateFormat" value="d"> </div> <div class="form-group"> <label for="dateInput">Input string:</label> <input id="dateInput" value="12/31/2016"> </div> <button class="btn btn-default" @click="parseDate(dateInput.value, dateFormat.value)"> Parse Date </button> <span>{{ dateResult }}</span> </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="numberFormat">Input format:</label> <input id="numberFormat" value="n2"> </div> <div class="form-group"> <label for="numberInput">Input string:</label> <input id="numberInput" value="123.456"> </div> <button class="btn btn-default" @click="parseNumber(numberInput.value, numberFormat.value)"> Parse Number </button> <span>{{ numberResult }}</span> </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.vue2.input'; import '@grapecity/wijmo.input'; let App = Vue.extend({ name: 'app', data: function() { return { dateResult: '', numberResult: '', selectedValue: 'en' }; }, methods: { parseDate(value, format) { let result = wijmo.Globalize.parseDate(value, format); // this.dateResult = wijmo.isDate(result) ? 'Parsed OK: ' + wijmo.Globalize.format(result, format) : '** Could not parse date... **'; }, parseNumber(value, format) { let result = wijmo.Globalize.parseFloat(value, format); // this.numberResult = wijmo.isNumber(result) ? 'Parsed OK: ' + wijmo.Globalize.format(result, format) : '** Could not parse number... **'; }, 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.src = url; // document.head.appendChild(script); }, cultureChanged(sender) { if (sender.selectedValue) { this.selectedValue = sender.selectedValue; this.loadCulture(sender.selectedValue); } } } }); 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/Parsing</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 = { dateResult: null, numberResult: null, selectedValue: 'en', dateFormat: 'd', date: '12/31/2016', numberFormat: 'n2', number: '123.456' }; } 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"> <div className="form-group"> <label id="dateFormat">Input format:</label> <input id="dateFormat" defaultValue={this.state.dateFormat} onChange={this._dateFormatChanged.bind(this)}/> </div> <div className="form-group"> <label htmlFor="dateInput">Input string:</label> <input id="dateInput" defaultValue={this.state.date} onChange={this._dateChanged.bind(this)}/> </div> <button className="btn btn-default" onClick={() => this._parseDate(this.state.date, this.state.dateFormat)}> Parse Date </button> <span>{this.state.dateResult}</span> </div> </div> <div className="panel panel-default"> <div className="panel-heading"> <h4 className="panel-title">Numbers</h4> </div> <div className="panel-body"> <div className="form-group"> <label htmlFor="numberFormat">Input format:</label> <input id="numberFormat" defaultValue={this.state.numberFormat} onChange={this._numberFormatChanged.bind(this)}/> </div> <div className="form-group"> <label htmlFor="numberInput">Input string:</label> <input id="numberInput" defaultValue={this.state.number} onChange={this._numberChanged.bind(this)}/> </div> <button className="btn btn-default" onClick={() => this._parseNumber(this.state.number, this.state.numberFormat)}> Parse Number </button> <span>{this.state.numberResult}</span> </div> </div> </div>; } _parseDate(value, format) { let result = wijmo.Globalize.parseDate(value, format); // this.setState({ dateResult: wijmo.isDate(result) ? 'Parsed OK: ' + wijmo.Globalize.format(result, format) : '** Could not parse date... **' }); } _parseNumber(value, format) { let result = wijmo.Globalize.parseFloat(value, format); // this.setState({ numberResult: wijmo.isNumber(result) ? 'Parsed OK: ' + wijmo.Globalize.format(result, format) : '** Could not parse number... **' }); } _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.src = url; document.head.appendChild(script); } _selectedCultureChanged(sender) { if (sender.selectedValue) { this.setState({ selectedValue: sender.selectedValue }); this._loadCulture(sender.selectedValue); } } _numberChanged(e) { this.setState({ number: e.target.value }); } _numberFormatChanged(e) { this.setState({ numberFormat: e.target.value }); } _dateChanged(e) { this.setState({ date: e.target.value }); } _dateFormatChanged(e) { this.setState({ dateFormat: e.target.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/Parsing</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, button { margin-right: 3px; }