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>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css">
<form id="date-form">Start Date:
<input name="StartDate" data-bind="datepicker: StartDate, value: StartDate" />
<br />End Date:
<input name="EndDate" data-bind="datepicker: EndDate, value: EndDate" />
<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."
}
}
});
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($("[name="+param+"]").val());
console.log("Start date...", end, start);
return this.optional(element) || start < end;
}, "Start Date must be less than End Date.");
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var $el = $(element);
//initialize datepicker with some optional options
var options = allBindingsAccessor.get("datepickerOptions") || {};
$el.datepicker(options).on("changeDate", function (ev) {
console.log("changeDate", ev.date);
var observable = valueAccessor();
observable(ev.date);
$(this).datepicker('hide');
$("#date-form").valid();
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).datepicker("setValue", value);
}
};
ko.applyBindings(DataModel);