格式

要使Wijmo应用程序全球化,请在加载Wijmo后包含对相应文化文件的引用. Wijmo 包括您可以选择的超过45种文化语言.

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 = () => { wijmo._updateCulture(); updateTables(); }; 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'); script.onload = () => wijmo._updateCulture(); 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 = () => { wijmo._updateCulture(); this.$forceUpdate(); }; // 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"> <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._updateCulture(); 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; }