JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<input data-bind="value: startDate" type="date" ></input>
<output id=startDate data-bind="text: startDate"></output>
<br />
<input data-bind="value: endDate" type="date"></input>
<output id=endDate data-bind="text: endDate"></output>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
JavaScript
//var todayDate = (new Date()).toISOString().split('T')[0],
viewModel = {
//reset startDate and EndDate
startDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
endDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
//set back the endDtate to 2034-04-28
//endDate: ko.observable("2034-04-28")
};
viewModel.endDate.subscribe(function(newValue) {
//
var startDatevalue = newValue.replace(/\D/g,''),
endDatevalue = endDate.value.replace(/\D/g,''),
diffDate = startDatevalue - endDatevalue;
if (diffDate < 0){
alert("the end date can not be before the start date");
viewModel.endDate = ko.observable( viewModel.startDate());
}
// Show the updated value in the console
console.info(newValue.replace(/\D/g,'') - endDate.value.replace(/\D/g,''));
});
ko.applyBindings( viewModel);