JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<h2>DateTime Picker Custom Validator</h2>
<div id="myViewDiv">
    <div data-template="users-template" data-bind="source: users"></div>
</div>

<script id="users-template" type="text/x-kendo-template">
    <div class="row">
        <input id="firstName" data-bind="value: firstName" />
        <br />
        <input id="lastName" data-bind="value: lastName" />
        <br />
        <input id="dob" data-role="datepicker" checkdates="true" data-bind="value: dateOfBirth">
        <br />
        <br />
    </div>
</script>

JavaScript

var viewModelDivId = "#myViewDiv";

        // Model
        var model = kendo.data.Model.define(
        {
            id: "id",
            fields: {
                id: { type: "number" },
                firstName: { type: "string" },
                lastName: { type: "boolean" },
                dateOfBirth: { type: "date" },
            },
        });
 
        // Viewmodel
        var viewModel = kendo.observable({
            users: null,

            initialize: function () {
                var observableArrayData = new kendo.data.ObservableArray(
                [
                      { id: 1, firstName: 'John', lastName: 'Doe', dateOfBirth: kendo.parseDate("9/14/2014") },
                    { id: 2, firstName: 'Jane', lastName: 'Doe', dateOfBirth: null },
                    { id: 3, firstName: 'Bob', lastName: 'Newhart', dateOfBirth: null }
                ]);

                viewModel.set('users', observableArrayData);

                observableArrayData.bind('change', function (e) {
                    viewModel.dataChange(e);
                });

            },

            dataChange: function (e) {
                console.log('dataChange --> ');
                console.log(e);

                 var theValidator = $(viewModelDivId).kendoValidator().data("kendoValidator");

                if (theValidator.validate()) {
                    console.log('Save the data');
                }
            },
        });

        // validator
        var myValidator = $(viewModelDivId).kendoValidator({
            rules: {
                custom: function (element) {
                    var attr = $(element).attr('checkDates');
                    if (typeof attr !== typeof undefined && attr !== false) {
                        console.log('validating a date--> ');
                        console.log(element);

                        var value = $(element).val();

                        if (value == null || value.length === 0)
                      ...