jQuery Datepicker - Disable weekends / holidays and the next three working days combined

Question

Using this rather neat approach I can disable weekends and holidays from the datepicker.

However, I want to combine this with the disabling of the next three business days from today's date. Simply setting the minimum date is relatively easy:

var dateMin = new Date();
dateMin.setDate(dateMin.getDate() + 3);
$(function() {

 $('#txtCollectionDate').datepicker(
 {
  beforeShowDay: noWeekendsOrHolidays,
  showOn: "both",
  dateFormat: "dd/mm/yy",
  firstDay: 1,
  changeFirstDay: false,
  minDate: dateMin
 });

});

However, what I really need to a function that calculates the business days:

var dateMin = new Date();
dateMin.setDate(AddBusinessDays(3));

Anyone able to convert this to JavaScript?

score 9 · Accepted Answer · answered Jan 08 '10 at 19:36

Found the solution here.

Code (apologies for the ASP):

<html>
    <head>
        <title>Collection Date</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> 
        <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" /> 

    </head>
<body>

<h1>jQuery Datepicker Test</h1>

<%
If Request.Form("Submit") <> "" then
%>
<h2>Form Post Confirmation</h2>
<table border="1">
<tr>
    <td><B>Form Variable</B></td>
    <td><B>Value</B></td>
</tr>
<%
Dim Item
For Each Item In Request.Form
%>
<tr>
    <td><%=Item %></td>
    <td><%=Request.Form(Item) %></td>
</tr>
<% Next %>
</table>
<%
End If
%>

<form name="Form1" method="post" action="TestDatePicker.asp" id="Form1">

<h2>Collection Form</h2>

<fieldset>
    <legend>Choose the collection date</legend>

    <div id="datepicker"></div>
    <input type="text" id="txtCollectionDate" name="txtCollectionDate" class="requiredField" style="display: none;" />

</fieldset>

<input type="submit" name="submit" value="Submit" />

</form>

<script type="text/javascript">
    $(document).ready(function() {

        var dateMin = new Date();
        var weekDays = AddWeekDays(3);

        dateMin.setDate(dateMin.getDate() + weekDays);

        var natDays = [
          [1, 1, 'uk'],
          [12, 25, 'uk'],
          [12, 26, 'uk']
        ];

        function noWeekendsOrHolidays(date) {
            var noWeekend = $.datepicker.noWeekends(date);
            if (noWeekend[0]) {
                return nationalDays(date);
            } else {
                return noWeekend;
            }
        }
        function nationalDays(date) {
            for (i = 0; i < natDays.length; i++) {
                if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
                    return [false, natDays[i][2] + '_day'];
                }
            }
            return [true, ''];
        }
        function AddWeekDays(weekDaysToAdd) {
            var daysToAdd = 0
            var mydate = new Date()
            var day = mydate.getDay()
            weekDaysToAdd = weekDaysToAdd - (5 - day)
            if ((5 - day) < weekDaysToAdd || weekDaysToAdd == 1) {
                daysToAdd = (5 - day) + 2 + daysToAdd
            } else { // (5-day) >= weekDaysToAdd
                daysToAdd = (5 - day) + daysToAdd
            }
            while (weekDaysToAdd != 0) {
                var week = weekDaysToAdd - 5
                if (week > 0) {
                    daysToAdd = 7 + daysToAdd
                    weekDaysToAdd = weekDaysToAdd - 5
                } else { // week < 0
                    daysToAdd = (5 + week) + daysToAdd
                    weekDaysToAdd = weekDaysToAdd - (5 + week)
                }
            }

            return daysToAdd;
        }

        $('#datepicker').datepicker(
        {
            inline: true,
            beforeShowDay: noWeekendsOrHolidays,
            altField: '#txtCollectionDate',
            showOn: "both",
            dateFormat: "dd/mm/yy",
            firstDay: 1,
            changeFirstDay: false,
            minDate: dateMin
        });
    });
</script>


</body>
</html>

This is great, and yet it seems there's a bug when I use 4 as # of days to add... just trying to find the bug. thx — TheBen, Apr 16 '20 at 03:06

Konstantin Petrukhnov · Answer 2 · 2010-11-09T12:15:18.270

My case was very close, but idea is that number of business days should be added to script. I replaced AddWeekDays() to AddBusinessDays() from Junto example. So when calculation minday it skip all non-business days.

    //holidays
    var natDays = [
      [1, 1, 'uk'],
      [12, 25, 'uk'],
      [12, 26, 'uk']
    ];

    var dateMin = new Date();
    var weekDays = AddBusinessDays(3);

    dateMin.setDate(dateMin.getDate() + weekDays);

    function AddBusinessDays(weekDaysToAdd) {
      var curdate = new Date();
      var realDaysToAdd = 0;
      while (weekDaysToAdd > 0){
        curdate.setDate(curdate.getDate()+1);
        realDaysToAdd++;
        //check if current day is business day
        if (noWeekendsOrHolidays(curdate)[0]) {
          weekDaysToAdd--;
        }
      }
      return realDaysToAdd;

    }

    function noWeekendsOrHolidays(date) {
        var noWeekend = $.datepicker.noWeekends(date);
        if (noWeekend[0]) {
            return nationalDays(date);
        } else {
            return noWeekend;
        }
    }
    function nationalDays(date) {
        for (i = 0; i < natDays.length; i++) {
            if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
                return [false, natDays[i][2] + '_day'];
            }
        }
        return [true, ''];
    }


    $('#datepicker').datepicker(
    {
        inline: true,
        beforeShowDay: noWeekendsOrHolidays,
        altField: '#txtCollectionDate',
        showOn: "both",
        dateFormat: "dd/mm/yy",
        firstDay: 1,
        changeFirstDay: false,
        minDate: dateMin
    });

using this i have 2 inputs and calculate the weekend count - var weekend_count = 0; for (i = $d1new.valueOf(); i <= $d2new.valueOf(); i+= 86400000){ var temp = new Date(i); if (temp.getDay() == 0 || temp.getDay() == 6) { weekend_count++; } } ------------------- how would implement a national holiday count? — Codded, Sep 21 '12 at 09:33

score 2 · Answer 3 · answered Jul 03 '13 at 17:13

Modifying the above code, for use with different days in different years, you can use...

    <script>
     //holidays
        var natDays = [
            [11,1,2012, 'mx'],[11,2,2012, 'mx'],[11,19,2012, 'mx'],
            [12, 12, 2012, 'mx'],[12,20,2012, 'mx'],[12,25,2012, 'mx'],[12,31,2012, 'mx'],
            [1,2,2013, 'mx'],[1,3,2013, 'mx'],[1, 4, 2013, 'mx'],[1,1,2014, 'mx'],[1,2,2014, 'mx']
        ];

        var dateMin = new Date();
        var weekDays = AddBusinessDays(3);

        dateMin.setDate(dateMin.getDate() + weekDays);

        function AddBusinessDays(weekDaysToAdd) {
          var curdate = new Date();
          var realDaysToAdd = 0;
          while (weekDaysToAdd > 0){
            curdate.setDate(curdate.getDate()+1);
            realDaysToAdd++;
            //check if current day is business day
            if (noWeekendsOrHolidays(curdate)[0]) {
              weekDaysToAdd--;
            }
          }
          return realDaysToAdd;

        }

        function noWeekendsOrHolidays(date) {
            var noWeekend = $.datepicker.noWeekends(date);
            if (noWeekend[0]) {
                return nationalDays(date);
            } else {
                return noWeekend;
            }
        }
        function nationalDays(date) {
            for (i = 0; i < natDays.length; i++) {
                if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1] && date.getFullYear() == natDays[i][2]) {
                    return [false, '', 'No laboral ' + natDays[i][3]+'']; /* 'Holiday in ' + natDays[i][3] */
                }
            }
            return [true, ''];
        }

        $(function() {
            $( "#datepicker" ).datepicker({
                beforeShowDay: noWeekendsOrHolidays,
                altField: '#FI',
                dateFormat: "dd/mm/yy",
                defaultDate: '-0y',
                changeMonth: true,
                changeYear: true,
                minDate: new Date(2012, 1 - 1, 5),
                //minDate: "-1Y", 
                maxDate: "0Y",
                showWeek: true,
                firstDay: 0,
                showOn: "both",
                buttonImage: "images/calendar.gif",
                buttonText: "Seleccionar Fecha", /*Select date text */
                buttonImageOnly: true,
            });
            $(this).focus();
        });
    </script>

jQuery Datepicker - Disable weekends / holidays and the next three working days combined

3 Answers3

Linked