使用 Bootstrap Datepicker 选择两个日期时显示总天数（不包括周六和周日）

Question

我的代码中有三个 <input> 标签，其中前两个接受使用 Bootstrap Datepicker 选择的日期，最后一个应该显示选择的总天数，不包括周六和周日。

$(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 解决方案。但是我无法实现这个功能。

我已经在以下 link JS Fiddle 上更新了我的代码（包括 JS）。如果有人能帮我解决这个问题就太好了。

Answer 1

进一步@photo_tom的评论是这样的。只需从输入中获取日期并计算日期。

像这样：

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

受到问题的启发How to calculate the total days between two selected calendar dates

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

P.S。它是 vanilla JS（可能有人需要没有 bootstrap 和 JQuery 的纯代码）。

使用 Bootstrap Datepicker 选择两个日期时显示总天数（不包括周六和周日）

Display total number of days(excluding saturdays and sundays), when two dates are selected using Bootstrap Datepicker

html

javascript

jquery

bootstrap-datepicker