Question 10937 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I find number of days excluding saturdays and sundays using Datepicker? – Jquery

I found a code for finding days excluding weekends between two date without using datapicker but I need to show calendar(visually).I wrote code for showing calendar with datapicker but I could not be successful to update the code to write the code the way to cover the weekend.I need this calendar for an ASP.NET Core MVC project.

I will write both:

<script>
    $(function () {
        $("#date1").datepicker();
        var date1 = $("#date1")
    });
    $(function () {
        $("#date2").datepicker();
        var date2 = $("#date2")
    });
    count = 0;
    
    function Diffr() {
        date1 = new Date(date1.value);
        date2 = new Date(date2.value);
        if (date1 < date2)
        {
            var milli_seconds = date1.getTime() - date2.getTime();
        }
        else
            var milli_seconds = date2.getTime() - date1.getTime();
      
        var days = milli_seconds / (1000 * 3600 * 24);
        document.getElementById("idd").innerHTML = Math.round(Math.abs(days));
    }
</script>

<p>
    Date1 :
    <input type="text" id="date1">
</p>

<p>
    Date2 :
    <input type="text" id="date2">
</p>
<button id="sub" class="btn btn-success" onclick="Diffr()">Submit</button>
<h3 id="idd">Difference</h3>

The other one is:

<script>
    function CalculateDiffr() {
        var date = document.getElementById('txt_Start').value;
        var date1 = date.split('.')[1] + "/" + date.split('.')[0] + "/" + date.split('.')[2];

        date = document.getElementById('txt_Last').value;
        var date2 = date.split('.')[1] + "/" + date.split('.')[0] + "/" + date.split('.')[2];

        var days = ['N', 'Y', 'Y', 'Y', 'Y', 'Y', 'N'];

        var d1 = new Date(date1);
        var d2 = new Date(date2);

        var busssinessday= 0;

        while (true) {

            if (d1 > d2) {
                break;
            }

            var dayName = days[d1.getDay()];

            if (dayName != "N") {
                businessday++;
            }

            d1.setDate(d1.getDate() + 1);
        }

        document.getElementById('Days').value = businessday.toString();
    }
</script>

@Html.TextBox("txt_Start", "", new { @class = "form-control" })
@Html.TextBox("txt_Last", "", new { @class = "form-control" })
@Html.TextBox("Days", "", new { @class = "form-control" })

<button onclick="CalculateDiffr()">OK</button>
Tags:

2

Answers


  1. 0

    How about using type="date" to show calendar(visually) ?

    Try:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>
    Start Date
    <input type="date" id="startdate"  />
</label>

<label>
    End Date
    <input type="date" id="enddate" />
</label>

<label>
    N. of days
    <output id="noofdays" />
</label>

<script>
    function calcBusinessDays(dDate1, dDate2) { // input given as Date objects
        var iWeeks, iDateDiff, iAdjust = 0;
        if (dDate2 < dDate1) return -1; // error code if dates transposed
        var iWeekday1 = dDate1.getDay(); // day of week
        var iWeekday2 = dDate2.getDay();
        iWeekday1 = (iWeekday1 == 0) ? 7 : iWeekday1; // change Sunday from 0 to 7
        iWeekday2 = (iWeekday2 == 0) ? 7 : iWeekday2;
        if ((iWeekday1 > 5) && (iWeekday2 > 5)) iAdjust = 1; // adjustment if both days on weekend
        iWeekday1 = (iWeekday1 > 5) ? 5 : iWeekday1; // only count weekdays
        iWeekday2 = (iWeekday2 > 5) ? 5 : iWeekday2;

        // calculate differnece in weeks (1000mS * 60sec * 60min * 24hrs * 7 days = 604800000)
        iWeeks = Math.floor((dDate2.getTime() - dDate1.getTime()) / 604800000)

        if (iWeekday1 < iWeekday2) { //Equal to makes it reduce 5 days
            iDateDiff = (iWeeks * 5) + (iWeekday2 - iWeekday1)
        } else {
            iDateDiff = ((iWeeks + 1) * 5) - (iWeekday1 - iWeekday2)
        }

        iDateDiff -= iAdjust // take into account both days on weekend

        return (iDateDiff + 1); // add 1 because dates are inclusive
    }


    $("#startdate, #enddate").change(function () {

        var d1 = $("#startdate").val();
        var d2 = $("#enddate").val();

        var minutes = 1000 * 60;
        var hours = minutes * 60;
        var day = hours * 24;

        var startdate1 = new Date(d1);
        var enddate1 = new Date(d2);


        var newstartdate = new Date();
        newstartdate.setFullYear(startdate1.getYear(), startdate1.getMonth(), startdate1.getDay());
        var newenddate = new Date();
        newenddate.setFullYear(enddate1.getYear(), enddate1.getMonth(), enddate1.getDay());
        var days = calcBusinessDays(newstartdate, newenddate);
        if (days > 0) {
            $("#noofdays").val(days);
        } else {
            $("#noofdays").val(0);
        }
    });
</script>

    result:
    enter image description here
    refer this answer

    Login or Signup to reply.
  2. 0

    According to this answer, you just create a function to get the count of the business days:

    $(function () {
        $("#date1").datepicker();
        var date1 = $("#date1")
    });
$(function () {
    $("#date2").datepicker();
    var date2 = $("#date2")
});

function getBusinessDatesCount(startDate, endDate) {
    let count = 0;
    const curDate = new Date(startDate.getTime());
    while (curDate <= endDate) {
        const dayOfWeek = curDate.getDay();
        if(dayOfWeek !== 0 && dayOfWeek !== 6) count++;
        curDate.setDate(curDate.getDate() + 1);
    }
    return count;
}

function Diffr() {
    date1 = new Date(date1.value);
    date2 = new Date(date2.value);
    
    let days = getBusinessDatesCount(date1, date2);
    document.getElementById("idd").innerHTML = Math.round(Math.abs(days));
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.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/4.6.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<p>
    Date1 :
    <input type="text" id="date1">
</p>

<p>
    Date2 :
    <input type="text" id="date2">
</p>
<button id="sub" class="btn btn-success" onclick="Diffr()">Submit</button>
<h3 id="idd">Difference</h3>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search