计算使用 Bootstrap Datepicker 设置的两个日期之间的年月日差

Question

我的代码中有三个 <input> 标签，其中两个填充了从 Bootstrap-Datepicker.

中选择的日期

<input id="from-date" type="text" class="form-control" placeholder="From">
<input id="to-date" type="text" class="form-control" placeholder="To">
<input id="total-count" class="form-control" placeholder="Total no. of Years, Months and Days.">

我想根据年月日计算这两个日期之间的差异，并将其显示在total-count中。我在 Stack Overflow 上浏览了一些示例，无法 achieve/find 一个理想的解决方案，因为它真的让我感到困惑。如果有人能帮我解决这个问题，那将是很大的帮助。

下面是我的JS代码。我已经更新了整个代码 Here

$(function() {

   // create the from date
   $('#from-date').datepicker({
     autoclose: true,
     format: 'dd-mm-yyyy',
   }).on('changeDate', function(ev) {
     ConfigureToDate();
   });


   $('#to-date').datepicker({
     autoclose: true,
     format: 'dd-mm-yyyy',
     startDate: $('#from-date').val()
   });

   // Set the min date on page load
   ConfigureToDate();

   // Resets the min date of the return date
   function ConfigureToDate() {
      $('#to-date').val("").datepicker("update");
      $('#to-date').datepicker('setStartDate', $('#from-date').val());
   }
});

Answer 1

你可以使用这个概念：

var date1 = new Date("7/13/2010");
var date2 = new Date("12/15/2010");
var timeDiff = Math.abs(date2.getTime() - date1.getTime());

var days = Math.floor(timeDiff / (1000 * 3600 * 24)); 
var months = Math.floor(days / 31);
varyears = Math.floor(months / 12);

希望这对您有所帮助:)

Answer 2

如果您正在处理日期，则无需重新发明轮子，Moment.js 是一个很棒的库。 (https://momentjs.com/)

Install/include 您页面上的 Moment.js，然后：

HTML:

<input id="from-date" type="text" class="form-control" placeholder="From">

<input id="to-date" type="text" class="form-control" placeholder="To">

<input id="total-count" class="form-control" placeholder="Total no. of Years, Months and Days.">
<br />
<br />
<input id="calculate" type="button" value="Calculate" />

JavaScript:

$(function() {

  $('#from-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
  });


  $('#to-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy'
  });

  $('#calculate').on('click', function() {

    var fromDate = moment($('#from-date').val(), 'DD-MM-YYYY');
    var toDate = moment($('#to-date').val(), 'DD-MM-YYYY'); 

    if (fromDate.isValid() && toDate.isValid()) {

      var duration = moment.duration(toDate.diff(fromDate));

      $('#total-count').val( duration.years() + ' Year(s) ' + duration.months() + ' Month(s) ' + duration.days() + ' Day(s)');

    } else {
        alert('Invalid date(s).')    

    }

  });


});

JSFiddle: (http://jsfiddle.net/cvh2u2bk/)

Answer 3

使用日期我建议您使用像 momentjs 这样的包，它可以帮助您解决使用某些日期格式的问题。

var date1 = moment('01/05/2017')
var date2 = moment('01/04/2017')

date1.diff(date2, 'days') //1
date1.diff(date2, 'months')//0
date1.diff(date2, 'years')//0

如果你想得到一个确切的差异，你可以添加标志变量

date1.diff(date2, 'months', true)//0.03225806451612903

更多文档https://momentjs.com/docs/#/displaying/difference/

Answer 4

$(function() {

  // create the from date
  $('#from-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
  }).on('changeDate', function(ev) {
    ConfigureToDate();
  });


  $('#to-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    startDate: $('#from-date').val()
  });

  // Set the min date on page load
  ConfigureToDate();

  // Resets the min date of the return date
  function ConfigureToDate() {
    $('#to-date').val("").datepicker("update");
    $('#to-date').datepicker('setStartDate', $('#from-date').val());
  }

  $("input[name='to_date']").on('change', function() {
    var fromDate = moment($('#from-date').val(), 'DD-MM-YYYY');
    var toDate = moment($('#to-date').val(), 'DD-MM-YYYY');

    if (fromDate.isValid() && toDate.isValid()) {
      var duration = moment.duration(toDate.diff(fromDate));
      $('#difference').val(
        duration.years() + ' Year(s) ' + duration.months() + ' Month(s) ' + duration.days() + ' Day(s)'
      );
    }
  });



});

input {
  cursor: pointer;
}

#difference {
  width: 210px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>


<input name="from_date" id="from-date" type="text" class="form-control" placeholder="From">
<input name="to_date" id="to-date" type="text" class="form-control" placeholder="To">
<input id="difference" class="form-control" placeholder="Total no. of Years, Months and Days.">

以防万一有人需要动态（没有点击事件）updates/calculates两个日期之间的差异的代码。

计算使用 Bootstrap Datepicker 设置的两个日期之间的年月日差

Calculate the difference between two dates set using Bootstrap Datepicker in terms of Years, Months and Days

javascript

jquery

bootstrap-datepicker