InputDate Overview

The InputDate control allows users to enter and edit dates. The dates can typed in any format supported by the Globalize class. It has the following advantages over regular input elements:

1. Users cannot enter non-numeric values at all.
2. You can use the format property to format and parse the date values to suit your app. The format string is expressed as a .NET-style Date format string as explained here.
3. You can use the min and max properties to specify the valid range of values (user will not be able to enter values outside this range).
4. You can use the step property to specify an increment that is added to the value when the user clicks the increment/decrement buttons on the control.

In the example below, InputDate accepts dates within the current week only:

HTML

<label for="theInputDate">The Date</label>
<div id="theInputDate"></div>

Javascript

import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';

function init() {
    // a regular input date
    let theDate = new input.InputDate('#theInputDate', {
            format: 'MMM dd, yyyy',
            min: firstDay,
            max: lastDay,
        });
}