skip to Main Content

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 class="input-group input-date range">
      <input type="text" class="form-control" id="from" value=""/>
      &nbsp;
      <div class="input-group-addon">to</div>
      &nbsp;
      <input type="text" class="form-control" id="to" value=""/>
</div>
<div class="form-group">
     <label>Number of days</label>
     <input class="form-control" 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>

2

Answers


  1. 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);
    }
    
    Login or Signup to reply.
  2. 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 class="input-group input-date range">
      <input type="text" class="form-control" id="from" value="" /> &nbsp;
      <div class="input-group-addon">to</div>
      &nbsp;
      <input type="text" class="form-control" id="to" value="" />
    </div>
    <div class="form-group">
      <label>Number of days</label>
      <input class="form-control" readonly type="text" id="numberdays" name="day">
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search