Affichage de la différence de la durée de la plage de mois uniquement avec Jquery DatePicker IN n mois format de l'année

Question

Actuellement, je construis une application et je dois prendre la différence du mois et de l'année sélectionnée par l'utilisateur, mais cela ne fonctionne pas pour moi.

Je viens de recevoir la date sélectionnée par l'utilisateur, mais pas la différence. La méthode datepicker indique la date actuelle du système.

Ce que je veux est

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

ET

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

Toutes les 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

S'il vous plaît trouver ci-dessous la solution mentionnée. Ici vous pouvez trouver la différence entre la gamme en mois.

$(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>