WjInputDateRange 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.

For most drop-down controls, this property is set to ClickAction.Select by default. This setting allows users to select portions of the text with the mouse.

For drop-down controls that display non-editable text (such as the MultiSelect), this property is set to ClickAction.Toggle by default.

The default value for this property is true.

This property is useful when styling the drop-down element, because it is shown as a child of the document body rather than as a child of the control itself, which prevents using CSS selectors based on the parent control.

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 default value for this property is false.

Disabled controls cannot get mouse or keyboard events.

The default value for this property is false.

The default value for this property is false.

This property defaults to true for most controls, including ComboBox, InputDate, InputTime, InputDateTime, and InputColor. It defaults to false for the AutoComplete control.

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 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 true.

The default value for this property is ShowMonthPicker.First.

The default value for this property is true.

tabindex attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.

Because of this, to read or change control's tabindex dynamically, you should do it using this property.

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.