JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<form id="date-form">Start Date:
    <input name="StartDate" data-bind="value: StartDate" required />
    <br />End Date:
    <input name="EndDate" data-bind="value: EndDate" required />
    <br /> <span class="validationMessage"></span>

</form>

JavaScript

$("#date-form").validate({
    rules: {
        StartDate: "required",
        EndDate: {
            required: true,
            dateGreater: {
                param: "StartDate"
            }
        }
    },
    messages: {
        StartDate: "Start date is required.",
        EndDate: {
            required: "End date is required.",
            dateGreater: "The start date must be less than the end date."
        }
    }
});

var DataModel = function () {
    var self = this;
    self.StartDate = ko.observable("7/20/2015");
    self.EndDate = ko.observable("7/25/2015");
};

$.validator.addMethod("dateGreater", function (endDate, element, param) {
    
    var end= new Date(endDate);
    var start = new Date(dm[param].call());
    
    return this.optional(element) || start < end;
}, "Start Date must be less than End Date.");

var dm = new DataModel();
ko.applyBindings(dm);