JSFiddle - React, Tailwind, and code Playground

by King Wilder

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 data-bind="value: StartDate" />
    <br />End Date:
    <input data-bind="value: EndDate" />
    <br /> <span class="validationMessage"></span>

</form>

JavaScript

$("#date-form").validate({
    rules: {
        StartDate: "required",
        EndDate: {
            required: true,
            dateGreater: {
                startDate: self.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").extend({
        dateGreater: self.StartDate
    });
};

$.validator.addMethod("dateGreater", function (endDate, element, startDate) {
    console.log("StartDate: " + startDate + " - EndDate: " + endDate);

    var start = new Date(startDate);
    var end = new Date(endDate);

    return this.optional(element) || start < end;
}, "Start Date must be less than End Date.");


ko.applyBindings(DataModel);