顯示使用Jquery DatePicker IN月n年格式的僅月月範圍差異

Question

目前我正在構建一些應用程序，我需要用戶選擇的月份和年份範圍的差異，但它不適用於我。

我只是得到用戶選擇的日期，但沒有區別。 datepicker方法正在給出當前系統日期。

我要的是

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

和

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

任何建議

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

請找到下面提到的解在這裏你可以找到幾個月之間的差異。

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