InputDate Class

The default value for this property is false, which causes the control to hide the calendar if one of the predefined ranges is selected.

The default value for this property is true.

The format string is expressed as a .NET-style Date format string.

The default value for this property is 'd', the culture-dependent short date pattern (e.g. 6/15/2020 in the US, 15/6/2020 in France, or 2020/6/15 in Japan).

The default value for this property is true.

Setting this property to false also disables the custom wheel handling for the control's drop-down calendar.

The formatter function can add any content to any date. It allows complete customization of the appearance and behavior of the calendar.

If specified, the function takes two parameters:

• the date being formatted
• the HTML element that represents the date

For example, the code below shows weekends with a yellow background:

inputDate.itemFormatter = (date, element) => {
    const day = date.getDay();
    element.style.backgroundColor = day == 0 || day == 6 ? 'yellow' : '';
}

If specified, the validator function should take one parameter representing the date to be tested, and should return false if the date is invalid and should not be selectable.

For example, the code below prevents users from selecting dates that fall on weekends:

inputDate.itemValidator = date => {
    const weekday = date.getDay();
    return weekday != 0 && weekday != 6;
}

The mask format is the same one that the wijmo.input.InputMask control uses.

If specified, the mask must be compatible with the value of the format and separator properties.

For example, the mask '99/99/9999 - 99/99/9999' can be used for entering date ranges formatted as 'MM/dd/yyyy' with a ' - ' separator.

The default value for this property is null, which means no latest date is defined.

For details about using the min and max properties, please see the Using the min and max properties topic.

The default value for this property is null, which means no earliest date is defined.

For details about using the min and max properties, please see the Using the min and max properties topic.

The default value for this property is 1.

For more details on this property, please see the Calendar.monthCount property.

When showing multiple months in the same calendar, months will be shown using a wrapping flex-box container. You may use CSS to limit the number of months shown per row in the drop-down.

For example this code creates an InputDate control with a drop-down that shows three months per row:

import { InputDate } from '@grapecity/wijmo.input';
let idt = new InputDate(document.createElement('#theInputDate'), {
    monthCount: 6,
    dropDownCssClass: 'three-months-per-row'
});

.three-months-per-row .wj-calendar-multimonth {
    width: calc(3 * 21em);
}

This property is useful only when the selectionMode property is set to DateSelectionMode.Range.

Each property in the object represents a predefined range, identified by the property name and defined by an array with two dates (range start and end).

Properties with null values represent custom ranges to be defined by users by clicking on the calendar.

For example:

import { DateTime } from '@grapecity/wijmo';
import { InputDate } from '@grapecity/wijmo.input';

new InputDate(host, {
    selectionMode: 'Range',
    predefinedRanges: getRanges()
});

function getRanges() {
    let dt = DateTime,
        now = new Date();
    return {
        'This Week': [dt.weekFirst(now), dt.weekLast(now)],
        'Last Week': [dt.weekFirst(dt.addDays(now, -7)), dt.weekLast(dt.addDays(now, -7))],
        'Next Week': [dt.weekFirst(dt.addDays(now, +7)), dt.weekLast(dt.addDays(now, +7))],

        'This Month': [dt.monthFirst(now), dt.monthLast(now)],
        'Last Month': [dt.monthFirst(dt.addMonths(now, -1)), dt.monthLast(dt.addMonths(now, -1))],
        'Next Month': [dt.monthFirst(dt.addMonths(now, +1)), dt.monthLast(dt.addMonths(now, +1))],
        'Custom Range': null
    };
}

To enable date range selection, set the selectionMode property to DateSelectionMode.Range.

Once you do that, the selection range will be defined by the value and rangeEnd properties.

This property is used only when the selectionMode property is set to DateSelectionMode.Range.

The default value for this property is 0, which means there is no maximum value for range lengths.

This property is used only when the selectionMode property is set to DateSelectionMode.Range.

The default value for this property is 0, which means there is no minimum value for range lengths.

The default value for this property is true.

This property affects the behavior of the drop-down calendar, but not the format used to display dates. If you set selectionMode to 'Month', you should normally set the format property to 'MMM yyyy' or some format that does not include the day. For example:

import { InputDate } from '@grapecity/wijmo.input';
var inputDate = new InputDate('#el, {
  selectionMode: 'Month',
  format: 'MMM yyyy'
});

The default value for this property is DateSelectionMode.Day.

This property is used only when the selectionMode property is set to DateSelectionMode.Range.

The default value for this property is a ' - '.

The default value for this property is true.

The default value for this property is ShowMonthPicker.First.

The default value for this property is true.

The default value for this property is the current date.

The default value for this property is zero.

The default value for this property is zero.