How to check whether a date is disabled or not in Bootstrap Datepicker?

Question

I have three <input> elements in my form.

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

out of which first and second accepts a date chosen from Bootstrap Datepicker and the last one displays total number of days.

The total number of days is calculated excluding weekends( Saturdays and Sundays). I now want to achieve a functionality as in, when I disable a set of dates using datesDisabled option, those disabled dates should not be counted to form total no. of days. How to check whether a date is disabled in Bootstrap Datepicker ?

Here is a quick JS Fiddle to my code.

Below is my JS.

$(function() {
            var date = new Date();
            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
            var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            // create the from date
            $('#from-date').datepicker({
                autoclose: true,
                format: 'dd-mm-yyyy',
                startDate: today,
                daysOfWeekDisabled: [0,6],
                datesDisabled:["12-04-2018","17-04-2018","19-04-2018"],
            }).on('changeDate', function(ev) {
                ConfigureToDate();
            });


            $('#to-date').datepicker({
                autoclose: true,
                format: 'dd-mm-yyyy',
                daysOfWeekDisabled: [0,6],
                datesDisabled:["12-04-2018","17-04-2018","19-04-2018"],
                startDate: $('#from-date').val()
            }).on('changeDate', function(ev) {
                var fromDate = $('#from-date').data('datepicker').dates[0];
                var get_no_of_days = getWorkingDatesCount(fromDate, ev.date);
                var final_count = parseInt(get_no_of_days) + 1;//adding +1 to the total number of days to count the present date as well.
                $('#total').val(final_count);
            });

            // 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 getWorkingDatesCount(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;
        }

If anyone could help me with this, it'll be of great help.

Answer 1

Working example: https://jsfiddle.net/cCrul/qLt6k0yv/

I just declared datesDisables as a variable:

var datesDisabled = ["12-04-2018", "17-04-2018", "19-04-2018"];

and I use it to check if curDate is in that array before executing count++:

if (
    !((dayOfWeek == 6) || (dayOfWeek == 0)) &&
    (datesDisabled.indexOf(formatDate(curDate)) == -1)
) {
    count++;
}

formatDate() function defined in the jsfiddle code.

$(function() {
  var date = new Date();
  var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());

  var datesDisabled = ["12-04-2018", "17-04-2018", "19-04-2018"];
  // create the from date
  $('#from-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    startDate: today,
    daysOfWeekDisabled: [0, 6],
    datesDisabled: datesDisabled,
  }).on('changeDate', function(ev) {
    ConfigureToDate();
  });


  $('#to-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    daysOfWeekDisabled: [0, 6],
    datesDisabled: datesDisabled,
    startDate: $('#from-date').val()
  }).on('changeDate', function(ev) {
    var fromDate = $('#from-date').data('datepicker').dates[0];
    var get_no_of_days = getWorkingDatesCount(fromDate, ev.date);
    var final_count = parseInt(get_no_of_days) + 1; //adding +1 to the total number of days to count the present date as well.
    $('#total').val(final_count);
  });

  // 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 getWorkingDatesCount(startDate, endDate) {
    var count = 0;
    var curDate = new Date(startDate);
    while (curDate <= endDate) {
      var dayOfWeek = curDate.getDay();
      if (!((dayOfWeek == 6) || (dayOfWeek == 0)) && (datesDisabled.indexOf(formatDate(curDate)) == -1)) {
        console.log(formatDate(curDate));
        count++;
      }
      curDate.setDate(curDate.getDate() + 1);
    }
    return count;
  }

  function formatDate(date) {
    var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [day, month, year].join('-');
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>


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