InputDate Validation

The InputDate control prevents users from selecting values outside the range determined by the min and max properties.

In many cases, however, not all dates in the range are valid. To handle these situations, the control has an itemValidator property. This property represents a function that takes a date as a parameter and returns true if the date is valid for selection, or false otherwise.

In the example below, InputDate prevents users from selecting dates on weekends and holidays:

HTML

  <input id="theInputDate">

CSS

.wj-calendar {
  max-width: 21em;
}

.wj-calendar .wj-header {
  color: white;
  background: #808080;
}

.wj-calendar .date-holiday:not(.wj-state-selected) {
  font-weight: bold;
  color: #008f22;
  background: #f0fff0;
  outline: 2pt solid #008f22;
}

.wj-calendar .date-weekend:not(.wj-state-selected) {
  background-color: #d8ffa6;
}

Javascript

import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';
import { getHoliday } from './data';

function init() {
    // the InputDate
    let theInputDate = new input.InputDate('#theInputDate', {
        itemValidator: (date) => (date.getDay() % 6 != 0) && !getHoliday(date)
    });

    // format items in the InputDate's calendar (apply styles to weekends and holidays):
    theInputDate.calendar.formatItem.addHandler((sender, e) => {
        let weekday = e.data.getDay(), holiday = getHoliday(e.data);
        
        wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
        wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
        e.item.title = holiday;
    });
}