显示总天数(不包括星期六和星期日)，当使用引导程序数据报警器选择两个日期时

Question

我的代码中有三个<input>标记，其中前两个接受使用引导数据报考选择的日期，最后一个应该显示所选的总天数(不包括星期六和星期日)。

​

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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" />
<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" class="form-control" placeholder="Total no. of days">

​

我尝试了在这个论坛上讨论的其他一些JS解决方案。但我无法实现这个功能。

我在下面的链接JS Fiddle上更新了我的代码(包括JS)。如果有人能帮我解决这个问题就太好了。

Answer 1

进一步到@photo的评论，这里是方法。只需从输入中获取日期并计算日期即可。

如下所示：

​

$(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()
  }).on('changeDate', function(ev) {
    var fromDate = $('#from-date').data('datepicker').dates[0];
    $('#total').val(getBusinessDatesCount(fromDate, ev.date));
  });

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

function getBusinessDatesCount(startDate, endDate) {
  var count = 0;
  var curDate = new Date(startDate);
  while (curDate <= endDate) {
    var dayOfWeek = curDate.getDay();
    if (!((dayOfWeek == 6) || (dayOfWeek == 0)))
      count++;
    curDate.setDate(curDate.getDate() + 1);
  }
  return count;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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" />
<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" class="form-control" placeholder="Total no. of days">

​

受如何计算两个选定日历日期之间的总天数问题的启发

Answer 2

您将有对象" days "，其中包含天数(0 -周日、.、6-周六)和总值(days.total)：

​

let from = document.getElementById("from-date");
let to = document.getElementById("to-date");
let result = document.getElementsByClassName("form-control")[2];

let days = {};

from.addEventListener("input",count);
to.addEventListener("input",count);

function count(){
  days = {};

  let fromDate = new Date(from.value);
  let toDate = new Date(to.value);

  if(fromDate == "Invalid Date" || toDate == "Invalid Date") return false;

  for (let i = +fromDate; i <= +toDate; i += 1000 * 60 * 60 * 24){
    let date = new Date(i);
    days[date.getDay()] = days[date.getDay()] + 1 || 1;
  }

  days.total = days[1] + days[2] + days[3] + days[4] + days[5] || 0;
  result.value = days.total;
}

<input id="from-date" type="date" class="form-control" placeholder="From"> 
<input id="to-date" type="date" class="form-control" placeholder="To">
<input class="form-control" placeholder="Total no. of days">

​

它是普通的JS (可能有人需要纯代码而不需要引导和JQuery)。