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

Question

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.

Answer 1

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

Answer 2

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

PS it is vanilla JS (may be somebody need pure code without bootstrap and JQuery).