InputDate Control

The InputDate control allows users to enter and edit dates. The dropdown for InputDate uses the Calendar control, so it is very easy to use. You can also configure the control to not have any date selected, by setting the isRequired property to false.

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() { // a regular input date let theDate = new input.InputDate('#theDate', { valueChanged: () => showCurrentDate(theDate) }); showCurrentDate(theDate); // // you can clear this one let theDateNotRequired = new input.InputDate('#theDateNotRequired', { isRequired: false, value: null, placeholder: 'Your birth date (optional)' }); // // show the currently selected date function showCurrentDate(ctrl) { let el = document.querySelector('#theDateOutput'); el.textContent = wijmo.Globalize.format(ctrl.value, 'D'); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity InputDate Overview</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> For example, here is an InputDate with default settings: </p> <div class="form-group"> <label for="theDate">InputDate</label> <input id="theDate"> </div> <div> The current date is <b><span id="theDateOutput"></span></b>. </div> <hr /> <p> By default, InputDate values are required, so you can't delete the entire content of the control. If you want to enter dates that are optional, set the <b>isRequired</b> property to false: </p> <div class="form-group"> <label for="theDateNotRequired">Not Required</label> <input id="theDateNotRequired"> </div> </div> </body> </html> label { width: 100px; 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 { } // @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 InputDate Overview</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> For example, here is an InputDate with default settings: </p> <div class="form-group"> <label for="theDate">InputDate</label> <wj-input-date #theDate id="theDate"></wj-input-date> </div> <div> The current date is <b>{{ theDate.value | date:'fullDate' }}</b>. </div> <hr /> <p> By default, InputDate values are required, so you can't delete the entire content of the control. If you want to enter dates that are optional, set the <b>isRequired</b> property to false: </p> <div class="form-group"> <label for="theDateNotRequired">Not Required</label> <wj-input-date id="theDateNotRequired" [isRequired]="false" [value]="null" [placeholder]="'Your birth date (optional)'"></wj-input-date> </div> </div> label { width: 100px; text-align: right; margin-right: 3px; } body { margin-bottom: 36px; } <template> <div class="container-fluid"> <p> For example, here is an InputDate with default settings: </p> <div class="form-group"> <label for="theDate">InputDate</label> <wj-input-date id="theDate" :initialized="initDate"></wj-input-date> </div> <div> The current date is <b>{{ theDate.value | formatDateTime }}</b>. </div> <hr /> <p> By default, InputDate values are required, so you can't delete the entire content of the control. If you want to enter dates that are optional, set the <b>isRequired</b> property to false: </p> <div class="form-group"> <label for="theDateNotRequired">Not Required</label> <wj-input-date id="theDateNotRequired" :isRequired="false" :value="null" placeholder="Your birth date (optional)"></wj-input-date> </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', data: function () { return { theDate: {} } }, methods: { initDate: function(date){ this.theDate = date; } }, filters: { formatDateTime: function(value){ return wijmo.Globalize.format(value, 'D'); } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> label { width: 100px; 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 InputDate Overview</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 = { value: null }; } render() { return <div className="container-fluid"> <p> For example, here is an InputDate with default settings: </p> <div className="form-group"> <label htmlFor="theDate">InputDate</label> <wjInput.InputDate id="theDate" initialized={this._onInitialized.bind(this)} valueChanged={this._onValueChanged.bind(this)}> </wjInput.InputDate> </div> <div> The current date is <b>{this._formatDateTime(this.state.value)}</b>. </div> <hr /> <p> By default, InputDate values are required, so you can't delete the entire content of the control. If you want to enter dates that are optional, set the <b>isRequired</b> property to false: </p> <div className="form-group"> <label htmlFor="theDateNotRequired">Not Required</label> <wjInput.InputDate id="theDateNotRequired" isRequired={false} value={null} placeholder="Your birth date (optional)"> </wjInput.InputDate> </div> </div>; } _onInitialized(sender) { this.setState({ value: sender.value }); } _formatDateTime(value) { return wijmo.Globalize.format(value, 'D'); } _onValueChanged(sender) { this.setState({ value: 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>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: 100px; text-align: right; margin-right: 3px; } body { margin-bottom: 36px; }