JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<div id="grid"></div>

JavaScript

var entries = [
    { id:1, col1: new Date(2012, 11, 31), col2: new Date(2013, 0, 1), col3: "Yes" },
    { id:2, col1: new Date(2013, 0, 1), col2: new Date(2013, 0, 1), col3: "No" },
    { id:3, col1: new Date(2013, 0, 2), col2: new Date(2013, 0, 1), col3: "No" }
];

var grid = $("#grid").kendoGrid({
    dataSource : {
        data    : entries,
        schema  : {
            model: {
                id    : "city",
                fields: {
                    col1: { type: "date",validation: { 
                    required: true
                }},
                    col2: { type: "date"},
                    col3: { editable: true }
                }
            }
        },
        pageSize: 3
    },
    columns    : [
        { field: "col1", title: "Col1", format: "{0:yyyy-MM-dd}"  },
        { field: "col2", title: "Col2", format: "{0:yyyy-MM-dd}" },
    ],
    editable   : "incell",
    navigatable: true,
    pageable   : true
}).data("kendoGrid");
        
        $('#grid').kendoValidator({
        rules: {
        specialDate: function (input) {
        
        input.attr("data-specialDate-msg", "The date should be 2013-01-02");
        
        return input.val() == '2013-01-02';
        }
        },
        messages: {specialDate: "The date should be 2013-01-02"}
        
        }
        );