JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example">
    <div class="box-col" style="width: 300px">
         <h4>Choose a date</h4>

        <input data-role="datepicker" data-bind="visible: isVisible,
                              enabled: isEnabled,
                              value: selectedDate" style="width: 180px;margin-right:30px" data-isValidDate data-isValidDateMsg="Please enter valid date">
    </div>
</div>

JavaScript

kendo.ui.validator.rules.isValidDate = function (input, params) {

    //ignore all other input that doesnt have this attribute
    //case insensitive
    if (!(input.is('[data-isValidDate]') || input.is('[data-isvaliddate]'))) return true;

    var retVal = false;

    var kendoDatePicker = input.data("kendoDatePicker");
    if (kendoDatePicker) {
        var d = kendo.parseDate(kendoDatePicker.value(), ["yyyy/MM/dd HH:mm", "MM/dd/yyyy HH:mm", "MMM dd, yyyy h:mm tt", "yyyy/MM/dd", "MM/dd/yyyy", "MMM dd, yyyy"]);
        retVal = d instanceof Date;
        if (false) input.closest('.k-datepicker').removeClass("red-box");
        else input.closest('.k-datepicker').addClass("red-box");
    }

    return retVal;
}

// enabling user to pass the custom validation message.
kendo.ui.validator.messages.isValidDate = function (input) {
    return typeof input.data("isValidDateMsg") === "undefined" ? typeof input.data("isvaliddatemsg") === "undefined" ? "Invalid Date" : input.data("isvaliddatemsg") : input.data("isValidDateMsg");
}


var viewModel = kendo.observable({
    selectedDate: null,
    isEnabled: true,
    isVisible: true,
});
kendo.bind($("#example"), viewModel);

var validator = $('#example').data('kendoValidator');
if (!validator) {
    $('#example').kendoValidator();
}