使用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解决方案。但是我无法实现这一功能。

我已在以下链接JS Fiddle上更新了我的代码（包括JS）。如果有人能为我解决这个问题会很棒。

Answer 1

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

像这样：

＆＃13;

＆＃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()
  }).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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

您将拥有对象“天”，其中包含天数（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的纯代码）。