使用 Jquery DatePicker IN n 月 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>