JSFiddle - React, Tailwind, and code Playground

by Todd Hilehoffer

HTML

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

<div id='container'>
<div>
     <label for="AssignedTestDateTime">
                            Assigned Test Date/Time</label>
                        <input id="assignedTestDateTime" name="AssignedTestDateTime" />
    
</div>
<div style="margin-top:50px">
    <span class="k-invalid-msg" data-for="assignedTestDateTime" >Invalid Date</span>
</div>
</div>
<div>
    <input type='button' id='validateButton' value='validate'/>
</div>

JavaScript

$(document).ready(function(){
  $('#assignedTestDateTime').kendoDatePicker();
 
 $('#validateButton').click(function (event) {
        event.preventDefault();
        var validator = $('#container').kendoValidator({
            rules: {
                //implement your custom date validation
                dateValidation: function (cntrl) {
                    if (cntrl.attr('id') == 'assignedTestDateTime') {
                        if ($(cntrl).val() !== '') {
                            
                            var isValidDate = Date.parse($(cntrl).val());
                            //Check if Date parse is successful
                            if (!isValidDate) {
                               
                                return false;
                            }
                        }
                    }
                    return true;
                }
            },
            messages: {
                dateValidation: "Invalid Date"
            }
        }).data("kendoValidator");
     validator.validate();});
 });