# InputDate Validation

Learn how to use validation with Wijmo's InputDate component in this tutorial

## Content


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

```html
  <input id="theInputDate">
```
##### CSS
```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

```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;
    });
}
```