Question

I am using Jquery datepicker on my website in order for customers to choose a desired date of delivery. Currently I've got it set up with a minDate of 4 excluding weekends or holidays. I just realized I need to account for the time of day so that if someone places an order after 2pm it will not count that day in the minDate (as it will be too late to ship out).

I was able to find a few posts about it, one in particular seemed applicable:

How do I restrict dates on datepicker after a certain time

However, I'm having a seriously difficult time applying this to my current script (below). If anyone can tell me how to fit this in that would be totally cool.

Thank you so much for your time and help! ~Susan

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

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

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

   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,           
        showOn: "both",            
        firstDay: 0,
        dateformat: "dd/mm/yy",
        changeFirstDay: false,
        showButtonPanel: true,       
        minDate: dateMin            
    });
 });
 </script>

<p>
<label for="datepicker">Desired Delivery Date: </label>
  <input class="input-medium" type="text" id="datepicker" placeholder="ex. 01/01/2013" name="properties[Delivery Date]" readonly />
  <label><font size=1>Need it faster? Please call us! (800) 880-0307</font>
  </label></p>
<style>
  #datepicker { height: 20px; }
  #datepicker {-webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}
</style>
Was it helpful?

Solution

I have finally solved this so am posting an answer to my own question. Hope it helps someone. Below is the complete code with a minDate of 4 days excluding US national holidays and weekends as well as the minDate adjustmentto exclude current day if it's after 2pm.

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

    //holidays
    var natDays = [
      [1, 1, 'New Year'], //2014
      [1, 20, 'Martin Luther King'], //2014
      [2, 17, 'Washingtons Birthday'], //2014       
      [5, 26, 'Memorial Day'], //2014
      [7, 4, 'Independence Day'], //2014
      [9, 1, 'Labour Day'], //2014
      [10, 14, 'Columbus Day'], //2013
      [11, 11, 'Veterans Day'], //2013
      [11, 28, 'Thanks Giving Day'], //2013 
      [12, 25, 'Christmas'] //2013     
];

    var dateMin = new Date();
    dateMin.setDate(dateMin.getDate() + (dateMin.getHours() >= 14 ? 1 : 0));
    AddBusinessDays(dateMin, 4);

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

    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,           
            showOn: "both",            
            firstDay: 0,
            dateformat: "dd/mm/yy",
            changeFirstDay: false,
            showButtonPanel: true,       
            minDate: dateMin            
    });
  });
  </script>

<p>
<label for="datepicker">Desired Delivery Date: </label>
  <input class="input-medium" type="text" id="datepicker" placeholder="ex. 01/01/2013" name="properties[Delivery Date]" readonly />
  <label><font size=1>Need it faster? Please call us! (800) 880-0307</font>
  </label></p>
<style>
  #datepicker { height: 20px; }
  #datepicker {-webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}
</style>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top