JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"></script>
<div id="paging1">
<ul class="list paging-items">
<li><!-- item -->
<h4>Due in <span class="days-due"></span> days</h4>
<h4><span data-bind="textualDate: firstDate" class="due-date"></span></h4>
</li><!-- #item -->
<li><!-- item -->
<h4>Due in <span class="days-due"></span> days</h4>
<h4><span data-bind="textualDate: secondDate" class="due-date"></span></h4>
</li><!-- #item -->
</ul>
</div>
JavaScript
// Count days due
function daysUntil(year, month, day) {
var now = new Date(),
dateEnd = new Date(year, month - 1, day), // months are zero-based
days = (dateEnd - now) / 1000/60/60/24; // convert milliseconds to days
return Math.round(days);
}
ko.bindingHandlers.textualDate = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
var textContent = moment(valueUnwrapped).format("MM/DD/YYYY");
ko.bindingHandlers.text.update(element, function () { return textContent; });
}
};
var viewModel = {
firstDate: ko.observable("2017-10-21"),
secondDate: ko.observable("2013-9-1")
};
ko.applyBindings(viewModel);
// Set days due
$('#paging1 ul li').each(function () {
var monthDue = $(this).find('.due-date').text().substr(0,2);
var dayDue = $(this).find('.due-date').text().substr(3,2);
var yearDue = $(this).find('.due-date').text().substr(6,4);
$(this).find('.days-due').text(daysUntil(yearDue, monthDue, dayDue));
});