I would like to exclude the weekends or the disabled days in calculating the selected days. how can i do that, I'm using Datepicker bootstrap also my framework is laravel.

<div >
      <input type="text"  id="from" value=""/>
      &nbsp;
      <div >to</div>
      &nbsp;
      <input type="text"  id="to" value=""/>
</div>
<div >
     <label>Number of days</label>
     <input  readonly type="text" id="numberdays" name="day">
 </div>

this is my script

    <script>
    $(document).on('click',function()
    {   
        $('#from').datepicker({
            dateFormat: 'mm/dd/yyyy',
            startDate: '-0',
            showOnFocus: true,
            todayHighlight: true,
            autoclose: true,
            daysOfWeekDisabled: '0,6',
            orientation: 'bottom'
        }).on('changeDate', function (eve) {
            
        });

        $('#to').datepicker({
            dateFormat: 'mm/dd/yyyy',
            startDate: '-0',
            showOnFocus: true,
            todayHighlight: true,
            daysOfWeekDisabled: '0,6',
            autoclose: true,
            orientation: 'bottom'
        }).on('changeDate', function (ev) {
            var start = $("#from").val();
            var startD = new Date(start);
            var end   = $("#to").val();
            var endD  = new Date(end);
            var curDate = new Date(start);
            var diff  = parseInt((endD.getTime()-startD.getTime())/(24*3600*1000)   1);
            $("#numberdays").val(diff);
        });
    });
  </script>

CodePudding user response：

I made a function to exclude the date index. Loop through from start to end to check the index, then exclude it from the summary if it's disabled.

$("#numberdays").val(calcDaysExclude(startD, endD, [0, 6])); Here the index of Saturday is 6, and Sunday is 0

$(document).on('click', function() {
  $('#from').datepicker({
    dateFormat: 'mm/dd/yyyy',
    startDate: '-0',
    showOnFocus: true,
    todayHighlight: true,
    autoclose: true,
    daysOfWeekDisabled: '0,6',
    orientation: 'bottom'
  }).on('changeDate', function(eve) {

  });

  $('#to').datepicker({
    dateFormat: 'mm/dd/yyyy',
    startDate: '-0',
    showOnFocus: true,
    todayHighlight: true,
    daysOfWeekDisabled: '0,6',
    autoclose: true,
    orientation: 'bottom'
  }).on('changeDate', function(ev) {
    var start = $("#from").val();
    var startD = new Date(start);
    var end = $("#to").val();
    var endD = new Date(end);
    var curDate = new Date(start);
    // var diff = parseInt((endD.getTime() - startD.getTime()) / (24 * 3600 * 1000)   1);

    // Sunday's index is 0
    // Saturday's index is 6
    // And so on, put others index as you configuring
    $("#numberdays").val(calcDaysExclude(startD, endD, [0, 6]));
  });
});

function calcDaysExclude(start, end, weekDaysIndex) {
  var totalBusinessDays = 0;

  // normalize both start and end to beginning of the day
  start.setHours(0, 0, 0, 0);
  end.setHours(0, 0, 0, 0);

  var current = new Date(start);
  current.setDate(current.getDate()   1);
  var day;
  // loop through each day, checking
  while (current <= end) {
    day = current.getDay();

    var isCount = true;
    weekDaysIndex.forEach(dayIndex => {
      if (day == dayIndex) {
        isCount = false;
      }
    });

    if (isCount) {
        totalBusinessDays;
    }

    current.setDate(current.getDate()   1);
  }
  return totalBusinessDays;
}
$(document).trigger('click');

<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.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h eCIAZHPXcpZaNw==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />



<div >
  <input type="text"  id="from" value="" /> &nbsp;
  <div >to</div>
  &nbsp;
  <input type="text"  id="to" value="" />
</div>
<div >
  <label>Number of days</label>
  <input  readonly type="text" id="numberdays" name="day">
</div>

CodePudding user response：

Something like this /- a day depending on from - to is including both

function(ev) {
  var start = $("#from").val();
  var startD = new Date(start);
  var end = $("#to").val();
  var endD = new Date(end);
  var curDate = new Date(start);
  const aDay = 24 * 3600 * 1000;
  let diff = 0;
  for (let d = startD.getTime(), end = endD.getTime(); start <= end; d  = aDay) {
    const date = new Date(d);
    if (![0, 6].includes(date.getDay())) diff  
  }
  $("#numberdays").val(diff);
}