InputNumber Ranges

Use the InputNumber's min and max properties to restrict the range of values that can be entered. Invalid numbers are discarded once editing is complete. In this sample, the InputNumber below only accepts values between 1 and 5.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // InputNumber with a restricted range let theInputNumber = new input.InputNumber('#theInputNumber', { format: 'n0', value: 1, min: 1, max: 5, step: 1 }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity InputNumber Ranges</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="theInputNumber">Guests</label> <div id="theInputNumber"></div> </div> </div> </body> </html> label { width: 120px; 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 { firstDay: Date; lastDay: Date; // constructor() { let curr = new Date(); // this.firstDay = new Date(curr.setDate(curr.getDate() - curr.getDay())); this.lastDay = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6)); } } // @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 Ranges</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 class="form-group"> <label for="theInputNumber">Guests</label> <wj-input-number id="theInputNumber" [format]="'n0'" [value]="1" [min]="1" [max]="5" [step]="1"> </wj-input-number> </div> </div> label { width: 120px; text-align: right; margin-right: 3px; } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <div class="form-group"> <label for="theInputNumber">Guests</label> <wj-input-number id="theInputNumber" :format="'n0'" :value="1" :min="1" :max="5" :step="1"> </wj-input-number> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; 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: 120px; 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 Ranges</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"> <div className="form-group"> <label htmlFor="theInputNumber">Guests</label> <wjInput.InputNumber id="theInputNumber" format="n0" value={1} min={1} max={5} step={1}> </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: 120px; text-align: right; margin-right: 3px; } body { margin-bottom: 24px; }