JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<p>Date 1:
    <input name="datepickerln1" id="datepickerln1" type="text" value="2014-11-14" />
</p>
<p>Date 2:
    <input name="datepickerln2" id="datepickerln2" type="text" value="2015-12-15" />
</p>days:
<input name="total" id="total" type="text" readonly />
<br/>month:
<input name="mtotal" id="mtotal" type="text" readonly />
<br/>year:
<input name="ytotal" id="ytotal" type="text" readonly />

JavaScript

var $second = $('#datepickerln2'),
    $first = $('#datepickerln1'),
    secondDate = $second.val(),
    firstDate = $first.val();

function calcDiff() {
    var d1 = $.datepicker.parseDate('yy-mm-dd', firstDate),
        d2 = $.datepicker.parseDate('yy-mm-dd', secondDate),
        diff = new Date(Math.abs(d2.getTime() - d1.getTime()));
    
    $('#total').val(diff.getUTCDate());
    $('#mtotal').val(diff.getUTCMonth());
    $('#ytotal').val(diff.getUTCFullYear() - 1970);
}

$second.datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function (dateStr) {
        secondDate = dateStr;
        calcDiff();
    }
});

$first.datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function (dateStr) {
        firstDate = dateStr;
        calcDiff();
    }
});