InputNumber Formatting

The InputNumber has a format property that determines the format of numbers as they are edited in the control. The syntax of the format parameter is similar to the one used in .NET and is documented here.

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() { // create several InputNumber controls and assign them formats let parent = document.querySelector('#inputNumbers'), template = '<div class="form-group">' + '<label for={id}>{fmt}: </label>' + '<input id={id}>' + '</div>'; // ['n0', 'n2', 'c0', 'c2', 'p0', 'p2'].forEach(fmt => { let id = 'theInputNumberF' + fmt, html = wijmo.format(template, { fmt: fmt, id: id }); // parent.appendChild(wijmo.createElement(html)); let theNumber = new input.InputNumber('#' + id, { format: fmt }); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity InputNumber 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 id="inputNumbers"> </div> </div> </body> </html> label { width: 80px; text-align: right; margin-right: 3px; } body { margin-bottom: 24px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // 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 { } // @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 InputNumber 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"> <div *ngFor="let fmt of ['n0', 'n2', 'c0', 'c2', 'p0', 'p2']; index as i;" class="form-group"> <label for="theInputNumberF{{i}}">{{fmt}}:</label> <wj-input-number id="theInputNumberF{{i}}" [format]="fmt"></wj-input-number> </div> </div> label { width: 80px; text-align: right; margin-right: 3px; } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <div v-for="(fmt,index) of ['n0', 'n2', 'c0', 'c2', 'p0', 'p2']" :key="index" class="form-group"> <label for="theInputNumberF{{index}}">{{fmt}}:</label> <wj-input-number id="theInputNumberF{{index}}" :format="fmt"></wj-input-number> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app' }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> label { width: 80px; text-align: right; margin-right: 3px; } 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 InputNumber 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 wjInput from '@grapecity/wijmo.react.input'; // class App extends React.Component { constructor(props) { super(props); this.state = { formats: ['n0', 'n2', 'c0', 'c2', 'p0', 'p2'] }; } render() { return <div className="container-fluid"> {this.state.formats.map(function (fmt, index) { return <div key={index} className="form-group"> <label htmlFor="{'theInputNumberF'+index}">{fmt}:</label> <wjInput.InputNumber id={'theInputNumberF' + index} format={fmt}> </wjInput.InputNumber> </div>; })} </div>; } } 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>AutoComplete</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> label { width: 80px; text-align: right; margin-right: 3px; } body { margin-bottom: 24px; }