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上看了一些例子，无法实现/找到一个理想的解决方案，因为它让我很困惑。如果有人能帮我解决这个问题，那将会有很大的帮助。

以下是我的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/）

在您的页面上安装/包含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

＆＃13;

$(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)'
      );
    }
  });



});

＆＃13;

input {
  cursor: pointer;
}

#difference {
  width: 210px;
}

＆＃13;

<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.">

＆＃13;

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

使用Bootstrap Datepicker以年，月和日计算两个日期之间的差异

4 个答案: