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"),
dateDiff : ko.computed(function () {
console.log(this.startDate);
console.log(this.endDate);
return moment.duration(this.endDate - this.startDate).humanize();
})
};
//console.log(todayDate);
//console.log(viewModel.startDate);
//console.log(viewModel.endDate());
/*
var startDate = moment(viewModel.startDate, 'MM-DD-YYYY'),
endDate = moment(viewModel.endDate(), 'MM-DD-YYYY'),
diff = startDate.diff(endDate, 'days');
console.log(diff);
*/
ko.applyBindings(viewModel);