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

Posted 2023-05-07

【中文标题】当使用 Bootstrap Datepicker 选择两个日期时，显示总天数（不包括周六和周日）

【英文标题】：Display total number of days(excluding saturdays and sundays), when two dates are selected using Bootstrap Datepicker

【发布时间】：2018-09-18 00:51:55

【问题描述】：

我有三个<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的解决方案。但我无法实现这一功能。 P>

我下面的链接上被更新我的代码（包括JS）JS Fiddle。这将是巨大的，如果有人能解决这个问题对我来说。 P>

【问题讨论】：

***.com/q/29933608/136717的可能重复

【参考方案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问题的启发

【讨论】：

感谢您的解决方案@Mosh Feu

我的荣幸?祝你好运?

嗨@Mosh Feu。我现在必须在 JS 中添加另一个功能，这样一周内的 holiday（除了 saturday 和 sunday ）也不应该添加到计数中。例如：当 from-date = 11-04-2018 和 to-date = 16-04-2018 并且如果 holiday 是 12-04-2018 b>，总天数应为 total = 3。此外，当 from 和 to 日期相同时，total days 应该是 1。

在上述评论中添加更多内容：我可以使用 datesDisabled 和 daysOfWeekDisabled 选项禁用所有假日日期和周末在日期选择器中。现在这些禁用日期不应该是计数的一部分。 @Mosh Feu 。我该如何做到这一点？无法找到适当的解决方法。我在这里更新了我的新代码 - jsfiddle.net/zNbUT/787

你可以像我们周末那样做。我的意思是，存储一个包含所有假期日期的数组。然后在if 中检查当天是否不是假期，例如：if (!((dayOfWeek == 6) || (dayOfWeek == 0) || isHoliday(curDate))。

【参考方案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">

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