计算使用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上浏览了一些示例，但无法实现/找到理想的解决方案，因为这确实让我感到困惑。 如果有人可以帮助我解决这个问题，那将有很大的帮助。

以下是我的JS代码。 我已经在这里更新了整个代码

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

如果您想获得确切的差异，可以添加flag变量

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

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