ComboBox with Numbers and Dates

Along with Strings, the ComboBox also supports Numbers and Dates. You can bind an array of numbers or dates to the ComboBox control. This sample demonstrates this, and formats the Dates uisng the wijmo.Globalize.format method.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Globalize } from '@grapecity/wijmo'; import { ComboBox } from '@grapecity/wijmo.input'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // select a number let theComboNumber = new ComboBox('#theComboNumber', { selectedIndexChanged: sender => { setText('theNumber', sender.selectedItem); }, itemsSource: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71], }); // select a date let theComboDate = new ComboBox('#theComboDate', { selectedIndexChanged: sender => { setText('theDate', Globalize.format(sender.selectedItem, 'd')); }, itemsSource: [new Date(2019, 0, 1), new Date(2019, 1, 12), new Date(2019, 1, 22), new Date(2019, 4, 13), new Date(2019, 4, 24), new Date(2019, 8, 19)], formatItem: (sender, e) => { e.item.textContent = Globalize.format(e.data, 'd'); }, }); // show text in an element on the page function setText(id, value) { document.getElementById(id).textContent = value; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ComboBox with Numbers and Dates</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"> <p> You can use ComboBoxes to select from lists of numbers: </p> <div class="form-group"> <label> Select a number: <div id="theComboNumber"></div> </label> </div> <p> You have selected this number: <b id="theNumber"></b>. </p> <hr /> <p> You can use ComboBoxes to select from lists of dates. In this case, we use the <b>formatItem</b> event to format the date objects using Wijmo's <b>Globalize</b> class: </p> <div class="form-group"> <label> Select a date: <div id="theComboDate"></div> </label> </div> <p> You have selected this date: <b id="theDate"></b>. </p> </div> </body> </html> body { margin-bottom: 24px; } label { margin-right: 3px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Globalize } from '@grapecity/wijmo'; import { FormatItemEventArgs } from '@grapecity/wijmo.input'; 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 { numbers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71]; dates = [new Date(2019, 0, 1), new Date(2019, 1, 12), new Date(2019, 1, 22), new Date(2019, 4, 13), new Date(2019, 4, 24), new Date(2019, 8, 19)]; formatDateItem(e: FormatItemEventArgs) { e.item.textContent = Globalize.format(e.data, 'd') } } @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 ComboBox with Numbers and Dates</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> You can use ComboBoxes to select from lists of numbers:</p> <div class="form-group"> <label> Select a number: <wj-combo-box #theComboNumber [itemsSource]="numbers"> </wj-combo-box> </label> </div> <p> You have selected this value: <b>{{ theComboNumber.selectedItem }}</b>. </p> <hr /> <p> You can use ComboBoxes to select from lists of dates. In this case, we use the <b>formatItem</b> event to format the date objects using Wijmo's <b>Globalize</b> class:</p> <div class="form-group"> <label> Select a date: <wj-combo-box #theComboDate [itemsSource]="dates" (formatItem)="formatDateItem($event)"> </wj-combo-box> </label> </div> <p> You have selected this date: <b> {{ theComboDate.text }}</b>. </p> </div> body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <p> You can use ComboBoxes to select from lists of numbers:</p> <div class="form-group"> <label> Select a number: <wj-combo-box :itemsSource="numbers" :selectedIndexChanged="numberChanged"> </wj-combo-box> </label> </div> <p> You have selected this value: <b>{{ number }}</b>. </p> <hr /> <p> You can use ComboBoxes to select from lists of dates. In this case, we use the <b>formatItem</b> event to format the date objects using Wijmo's <b>Globalize</b> class:</p> <div class="form-group"> <label> Select a date: <wj-combo-box :itemsSource="dates" :formatItem="formatDateItem" :selectedIndexChanged="dateChanged"> </wj-combo-box> </label> </div> <p> You have selected this date: <b>{{ date | wj-format('d') }}</b>. </p> </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'; import * as wijmo from '@grapecity/wijmo'; let App = Vue.extend({ name: 'app', data: function () { const numbers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71]; const dates = [new Date(2019, 0, 1), new Date(2019, 1, 12), new Date(2019, 1, 22), new Date(2019, 4, 13), new Date(2019, 4, 24), new Date(2019, 8, 19)]; return { numbers: numbers, dates: dates, number: numbers[0], date: dates[0] } }, methods: { formatDateItem(sender, e) { e.item.textContent = wijmo.Globalize.format(e.data, 'd'); }, numberChanged(sender) { this.number = sender.selectedValue; }, dateChanged(sender) { this.date = sender.selectedValue; } } }); let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity ComboBox with Numbers and Dates</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 { Globalize } from '@grapecity/wijmo'; import { ComboBox } from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); this.numbers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71]; this.dates = [new Date(2019, 0, 1), new Date(2019, 1, 12), new Date(2019, 1, 22), new Date(2019, 4, 13), new Date(2019, 4, 24), new Date(2019, 8, 19)]; this.state = { number: this.numbers[0], date: this.dates[0] }; } render() { return <div className="container-fluid"> <p> You can use ComboBoxes to select from lists of numbers: </p> <div className="form-group"> <label> Select a number: <ComboBox itemsSource={this.numbers} selectedIndexChanged={sender => { this.setState({ number: sender.selectedItem }); }}> </ComboBox> </label> </div> <p> You have selected this number: <b>{this.state.number}</b>. </p> <hr /> <p> You can use ComboBoxes to select from lists of dates. In this case, we use the <b>formatItem</b> event to format the date objects using Wijmo's <b>Globalize</b> class: </p> <div className="form-group"> <label> Select a date: <ComboBox itemsSource={this.dates} formatItem={(sender, e) => { e.item.textContent = Globalize.format(e.data, 'd'); }} selectedIndexChanged={sender => { this.setState({ date: sender.selectedItem }); }}> </ComboBox> </label> </div> <p> You have selected this date: <b>{Globalize.format(this.state.date, 'd')}</b>. </p> </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>GrapeCity ComboBox with Numbers and Dates</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; }