Subtract extract months between two dates in javascript

Hello to all GODS of SCRIPTS, I am having difficulty extracting the total of months between two dates ex: datafinal(29/03/2018) - datainicial(29/01/2018) = 2 months, however the dates are provided by datepiker jquery and if you could inform the command to change the value of the result when changed one or both dates in javascript. Grateful now; follow the code below:

<div class="control-form">
   <label for="">Data Inicial:</label>
   <input name="datainicial" type="text" id="calendario" value="29/01/2018"  class="form-control" >
</div>
<div class="control-form">
   <label for="">Data Final:</label>
   <input name="datafinal" type="text" id="calendario2" class="form-control" >
</div>
<div class="control-form">
   <label for="">Numero de Parcelas:</label>
   <input name="numeroparcelas" type="text" class="form-control" id="numeroparcelas">
</div>
Author: Sam, 2018-01-30

1 answers

The Datepicker jquery has an event onSelect: when a date is selected. Then you can call a function inside that event and calculate:

$('input[id*="calendario"]').datepicker({
   dateFormat: 'dd/mm/yy',
   onSelect: function(){
      var mesIni = $("#calendario").val().split("/");
      var mesFim = $("#calendario2").val().split("/");

      mesIni = new Date(mesIni.pop()+"-"+mesIni[1]+"-"+mesIni.shift());
      mesFim = new Date(mesFim.pop()+"-"+mesFim[1]+"-"+mesFim.shift());

      var meses = mesFim.getMonth() - mesIni.getMonth() 
      + (12 * (mesFim.getFullYear() - mesIni.getFullYear()));

      if(!isNaN(meses)) $("#numeroparcelas").val(meses);
   }
});

See example:

$('input[id*="calendario"]').datepicker({
   dateFormat: 'dd/mm/yy',
   onSelect: function(){
      var mesIni = $("#calendario").val().split("/");
      var mesFim = $("#calendario2").val().split("/");
      
      mesIni = new Date(mesIni.pop()+"-"+mesIni[1]+"-"+mesIni.shift());
      mesFim = new Date(mesFim.pop()+"-"+mesFim[1]+"-"+mesFim.shift());
      
      var meses = mesFim.getMonth() - mesIni.getMonth() 
      + (12 * (mesFim.getFullYear() - mesIni.getFullYear()));
   
      if(!isNaN(meses)) $("#numeroparcelas").val(meses);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="control-form">
   <label for="">Data Inicial:</label>
   <input name="datainicial" type="text" id="calendario" value="29/01/2018"  class="form-control" >
</div>
<div class="control-form">
   <label for="">Data Final:</label>
   <input name="datafinal" type="text" id="calendario2" class="form-control" >
</div>
<div class="control-form">
   <label for="">Numero de Parcelas:</label>
   <input name="numeroparcelas" type="text" class="form-control" id="numeroparcelas">
</div>
 0
Author: Sam, 2018-01-30 01:35:22