0

I have three <input> tags in my code out of which first two accepts date selected using Bootstrap Datepicker, and the last one should show the total number of days selected excluding Saturdays and Sundays.

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

I tried some of the other JS solutions that were discussed on this forum. But I'm unable to achieve this functionality.

I have updated my code(including JS) on the following link JS Fiddle. It would be great if anyone could solve this for me.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
mvk
  • 53
  • 1
  • 9

2 Answers2

2

Further to @photo_tom's comment here is the way. Just get the dates from the inputs and calculate the dates.

Like this:

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

Inspired by the question How to calculate the total days between two selected calendar dates

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
  • Thank you for the solution @Mosh Feu – mvk Apr 09 '18 at 09:46
  • 1
    My pleasure Good luck – Mosh Feu Apr 09 '18 at 10:45
  • Hi @Mosh Feu . I now have to add another functionality into the JS such that, an `holiday` in a week( apart from `saturday` and `sunday` ) should also not add to the count. Eg: When **from-date = 11-04-2018** and **to-date = 16-04-2018** and if **holiday is 12-04-2018**, total days should be **total = 3**. Also when **from** and **to** dates are same, **total days** should be 1. – mvk Apr 11 '18 at 07:49
  • Adding few more things to the above comment: I was able to disable all the holiday dates and the weekend days using **datesDisabled** and **daysOfWeekDisabled** option available in the datepicker. Now these disabled dates shouldn't be part of the count. @Mosh Feu . How do I accomplish this? Not able to find a proper workaround. I have updated my new code here - http://jsfiddle.net/zNbUT/787/ – mvk Apr 11 '18 at 09:38
  • 1
    You can do it the way we did it for weekends. I mean, store an array with all the holidays dates. Then in the `if` check if the day is not holiday, something like: `if (!((dayOfWeek == 6) || (dayOfWeek == 0) || isHoliday(curDate))`. – Mosh Feu Apr 11 '18 at 12:12
  • I was able to do it! Thanks :) Updated Fiddle https://jsfiddle.net/cCrul/qLt6k0yv/ – mvk Apr 16 '18 at 06:03
0

You will have object "days", which contains days (0 - sunday, ..., 6 - saturday) and total value (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. it is vanilla JS (may be somebody need pure code without bootstrap and JQuery).

Artem
  • 71
  • 4