Displaying difference of only month year range duration using Jquery DatePicker IN n month n year format

Question

Currently I am building some application and I need to take the difference of the month and year range selected by user, but its not working for me.

I'm just getting the date selected by user, but not the difference. The datepicker method is giving the current system date.

What I want is

from date: Aug-2016
To date: Sep-2017
Difference: 1 month 1 year

AND

from date: Aug-2017
To date: Oct-2017
Difference: 2 month 

Any suggestions

$("#from, #to").datepicker({ 
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',            
  onClose: function(dateText, inst) { 
    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();             
    $(this).datepicker('setDate', new Date(year, month, 1));
  },
  beforeShow : function(input, inst) {
    if ((datestr = $(this).val()).length > 0) {
      year = datestr.substring(datestr.length-4, datestr.length);
      month = jQuery.inArray(datestr.substring(0, datestr.length-5),      $(this).datepicker('option', 'monthNames'));
      $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
      $(this).datepicker('setDate', new Date(year, month, 1));    
    }
    var other = this.id == "from" ? "#to" : "#from";
    var option = this.id == "from" ? "maxDate" : "minDate";        
    if ((selectedDate = $(other).val()).length > 0) {
      year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
      month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
      $(this).datepicker( "option", option, new Date(year, month, 1));
    }
  }
});      
            
    
//button click function     
$("#btnShow").click(function(){ 
  if ($("#from").val().length == 0 || $("#to").val().length == 0){
    alert('All fields are required');
  } else {
    alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
  }
});

.ui-datepicker-calendar {
  display: none;
}    

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div style="text-align:center;">
  <label for="from">From</label>
  <input type="text" id="from" name="from" readonly="readonly" />
  <label for="to">to</label>
  <input type="text" id="to" name="to" readonly="readonly"  />
  <input type="button" id="btnShow" value="Show" /> 
</div>

Answer 1

Please find below mentioned solution. Here you can find difference between range in months.

$(document).ready(function() {
    $("#from").datepicker({
        dateFormat: 'yy-mm',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        beforeShow: function(input, inst) {
            if (!$(this).val()) {
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)).trigger('change');
            }
        },
        onClose: function(dateText, inst) {
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            $("#to").datepicker("option", {minDate: new Date(inst.selectedYear, inst.selectedMonth, 1)})
        }
    });
    $('#from').datepicker('setDate', new Date());
    $('#to').datepicker({
        dateFormat: 'yy-mm',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        onClose: function(dateText, inst) {
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)).trigger('change');
        }
    });
    
    $("#btnShow").click(function() {
        if ($("#from").val().length == 0 || $("#to").val().length == 0) {
            alert('All fields are required');
        } else {
            var startDay = new Date($("#from").val());
            var endDay = new Date($("#to").val());
            var date2_UTC = new Date(Date.UTC(endDay.getUTCFullYear(), endDay.getUTCMonth()));
            var date1_UTC = new Date(Date.UTC(startDay.getUTCFullYear(), startDay.getUTCMonth()));

            var months = date2_UTC.getMonth() - date1_UTC.getMonth();
            if (months < 0) {
                date2_UTC.setFullYear(date2_UTC.getFullYear() - 1);
                months += 12;
            }
            var years = date2_UTC.getFullYear() - date1_UTC.getFullYear();

            if (years > 0) {
                if(months > 0)
                  $('#result').html(years + " year " + " " + months + " month");
                else
                  $('#result').html(years + " year ");
                
            } else {
                $('#result').html(months + " month");
            }

        }
    });
});

.ui-datepicker-calendar {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<style>.ui-datepicker-calendar {display: none;}</style>

<div style="text-align:center;">
    <label for="from">From</label>
    <input type="text" id="from" name="from" readonly="readonly" />
    <label for="to">to</label>
    <input type="text" id="to" name="to" readonly="readonly"  />
    <input type="button" id="btnShow" value="Show" /> 
</div>

<div id="result"></div>