JSFiddle - React, Tailwind, and code Playground

by maxious

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<form id="MyForm">
<input id="datepicker" pattern="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" placeholder="MM/DD/YYYY" value="" style="width:150px;" />
</form>

JavaScript

$("#datepicker").kendoDatePicker({
    format: "MM/dd/yy"
});

$("#MyForm").kendoValidator({
    rules: {
        //implement your custom date validation
        dateValidation: function (e) {
            var currentDate = kendo.parseDate($(e).val());
            //Check if Date parse is successful
            if (!currentDate) {
                return false;
            }
            return true;
        }
    },
    messages: {
        //Define your custom validation massages
        required: "Date is required message",
        dateValidation: "Invalid date message"
    }
});

$("#datepicker").data("kendoDatePicker").options.parseFormats = ["MM/dd/yyyy", "MM/dd/yy"]