InputTime Control

The InputTime control extends the ComboBox class to allow easy entry and editing of time values. This sample displays an InputDate and InputTime controls and uses them together to edit the date and time information in Javascript Date objects.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import * as wijmo from '@grapecity/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // the input time control let theInputTime = new input.InputTime('#theInputTime', { format: 'h:mm tt', min: '9:00', max: '17:00', step: 30, isEditable: true, valueChanged: (sender) => setDateTime(sender.value) }); // // show that we can edit dates without changing time let theInputDate = new input.InputDate('#theInputDate', { valueChanged: (sender) => setDateTime(sender.value) }); // // initialize and update the date/time value let dt = new Date(); dt.setHours(17, 30); setDateTime(dt); // function setDateTime(value) { let el = document.querySelector('#dateTime'); el.textContent = wijmo.Globalize.format(value, 'F'); // theInputDate.value = value; theInputTime.value = value; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity InputTime</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="theInputDate">InputDate:</label> <input id="theInputDate"> </div> <div class="form-group"> <label for="theInputTime">InputTime:</label> <input id="theInputTime"> </div> <p> The current date/time is: <b><span id="dateTime"></span></b>. </p> </div> </body> </html> label { width: 120px; text-align: right; margin-right: 3px; } body { margin-bottom: 36px; } 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 { value: Date; // constructor() { this.value = new Date(); this.value.setHours(17, 30); } } // @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 InputTime</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="theInputDate">InputDate:</label> <wj-input-date id="theInputDate" [(value)]="value"></wj-input-date> </div> <div class="form-group"> <label for="theInputTime">InputTime:</label> <wj-input-time id="theInputTime" [(value)]="value" [format]="'h:mm tt'" [min]="'9:00'" [max]="'17:00'" [step]="30" [isEditable]="true"></wj-input-time> </div> <p> The current date/time is: <b>{{ value | date:'EEEE, MMMM d, y, h:mm:ss a' }}</b>. </p> </div> label { width: 120px; text-align: right; margin-right: 3px; } body { margin-bottom: 36px; } <template> <div class="container-fluid"> <div class="form-group"> <label for="theInputDate">InputDate:</label> <wj-input-date id="theInputDate" :value="value" :valueChanged='onValueChanged'></wj-input-date> </div> <div class="form-group"> <label for="theInputTime">InputTime:</label> <wj-input-time id="theInputTime" :value="value" :format="'h:mm tt'" :min="'9:00'" :max="'17:00'" :step="30" :isEditable="true" :valueChanged='onValueChanged'></wj-input-time> </div> <p> The current date/time is: <b>{{ value | formatDateTime }}</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'; let App = Vue.extend({ name: 'app', data: function () { let value = new Date(); value.setHours(17, 30, 0); return { value: value } }, methods: { onValueChanged: function(s){ this.value = s.value; } }, filters: { formatDateTime: function(value){ return wijmo.Globalize.format(value, 'F'); } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> label { width: 120px; text-align: right; margin-right: 3px; } body { margin-bottom: 36px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity InputTime</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.onValueChanged = (s) => { this.setState({ value: s.value }); }; this.formatDateTime = (value) => { return wijmo.Globalize.format(value, 'F'); }; let value = new Date(); value.setHours(17, 30, 0); this.state = { value: value }; } render() { return <div className="container-fluid"> <div className="form-group"> <label htmlFor="theInputDate">InputDate:</label> <wjInput.InputDate id="theInputDate" value={this.state.value} valueChanged={this.onValueChanged}> </wjInput.InputDate> </div> <div className="form-group"> <label htmlFor="theInputTime">InputTime:</label> <wjInput.InputTime id="theInputTime" value={this.state.value} format="h:mm tt" min="9:00" max="17:00" step={30} isEditable={true} valueChanged={this.onValueChanged}> </wjInput.InputTime> </div> <p> The current date/time is: <b>{this.formatDateTime(this.state.value)}</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>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: 36px; }