JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<input id="from-date" type="text" class="form-control" placeholder="From">

<input id="to-date" type="text" class="form-control" placeholder="To">

<input id="total-count" class="form-control" placeholder="Total no. of Years, Months and Days.">
<br />
<br />
<input id="calculate" type="button" value="Calculate" />

JavaScript

$(function() {

  // create the from date
  $('#from-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
  });


  $('#to-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy'
  });

  $('#calculate').on('click', function() {
		var fromDate = moment($('#from-date').val(), 'DD-MM-YYYY');
    var toDate = moment($('#to-date').val(), 'DD-MM-YYYY'); 
  	
    if (fromDate.isValid() && toDate.isValid()) {
			var duration = moment.duration(toDate.diff(fromDate));
      $('#total-count').val(
      	duration.years() + ' Year(s) ' + duration.months() + ' Month(s) ' + duration.days() + ' Day(s)'
        );
    } else {
    	alert('Invalid date(s).')    
    }

  });


});