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.

The InputDate below demonstrates this. It prevents users from selecting dates on weekends and holidays:

The current date is Tuesday, April 8, 2025.

// This file locates: "Scripts/Lesson/C1Input/InputDateValidation.js".
c1.documentReady(function () {
    var theInputDate = wijmo.Control.getControl('#theInputDate');
    theInputDate.valueChanged.addHandler(function (s, e) {
        showCurrentDate();
    });
    theInputDate.itemValidator = function (date, element) {
        return (date.getDay() % 6 != 0) && !getHoliday(date);
    };
 
    // format items in the InputDate's calendar:
    var calendar = theInputDate.calendar;
    calendar.formatItem.addHandler(function (s, e) { // apply styles to weekends and holidays
        var 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;
    });
 
    // show the currently selected date
    function showCurrentDate() {
        var el = document.getElementById('theInputDateOutput');
        el.textContent = wijmo.Globalize.format(theInputDate.value, 'D');
    }
    showCurrentDate();
 
    // gets the holiday for a given date
    var holidays = {
        '1/1': 'New Year\'s Day',
        '6/14': 'Flag Day',
        '7/4': 'Independence Day',
        '11/11': 'Veteran\'s Day',
        '12/25': 'Christmas Day',
        '1/3/1': 'Martin Luther King\'s Birthday', // third Monday in January
        '2/3/1': 'Washington\'s Birthday', // third Monday in February
        '5/3/6': 'Armed Forces Day', // third Saturday in May
        '9/1/1': 'Labor Day', // first Monday in September
        '10/2/1': 'Columbus Day', // second Monday in October
        '11/4/4': 'Thanksgiving Day', // fourth Thursday in November
    };
 
    function getHoliday(date) {
        var day = date.getDate(),
          month = date.getMonth() + 1,
          holiday = holidays[month + '/' + day];
        if (!holiday) {
            var weekDay = date.getDay(),
              weekNum = Math.floor((day - 1) / 7) + 1;
            holiday = holidays[month + '/' + weekNum + '/' + weekDay];
        }
        return holiday;
    }
});

// This file locates: "Content/css/Lesson/C1Input/InputDateValidation.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;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: InputDateValidation
        public ActionResult InputDateValidation()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.InputDateValidation_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.InputDateValidation_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputDateValidation_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputDateValidation_Text3)
</p>
@Html.C1().InputDate().Id("theInputDate")
<div>
    @Html.Raw(Resources.C1Input.InputDateValidation_Text4)
</div>